/*===================== TABLE OF CONTENT =======================
1. General Styling
2. Cross Browser Compatibility
3. Simple Header
4. Creative Header
5. Transparent Header
6. Dropdown
7. Megamenu
8. Responsive Header
9. Lookbook Style
10. Texty Post Style
11. Weekly Featured Post
12. Sliders
13. Grid Posts
14. Fancy Posts Style
15. Square Post Style
16. Author Post Carousel
17. Posts Carousel
18. Sidebar
19. Gallery Footer
20. Page Top
21. Simple Text
22. Single Post
23. Related Posts
24. Contact Page
25. Footer
26. OWL CAROUSEL STYLING
=============================================================*/


/*=============== Fonts ===================*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,900,900italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);

/*=============== General Styling ===================*/

html,
body {
    overflow-x: hidden
}

body {
    float: left;
    width: 100%;
    font-family: arimo;
    letter-spacing: 0.3px;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #505050;
    font-family: roboto slab;
    font-weight: 600;
}

p {
    color: #606060;
    font-family: arimo;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 24px;
}

ul li,
ol li {
    font-family: arimo;
    color: #454545;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

.theme-layout {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.theme-layout.boxed {
    background: none repeat scroll 0 0 #FFFFFF;
    float: none;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-box-shadow: 0 0 6px #747474;
    -moz-box-shadow: 0 0 6px #747474;
    -ms-box-shadow: 0 0 6px #747474;
    -o-box-shadow: 0 0 6px #747474;
    box-shadow: 0 0 6px #747474;
}

section {
    float: left;
    position: relative;
    width: 100%;
}

.block {
    float: left;
    width: 100%;
    position: relative;
}

.container {
    width: 1170px;
    margin: 0 auto;
}

.container:before,
.container:after {
    display: table;
    content: "";
}

.container:after {
    clear: both
}

.container .row,
.row {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0;
}

.row .col {
    padding: 0 15px
}

.block.less-spacing {
    padding: 60px 0
}

.block .container {
    padding: 0
}

.container {
    padding: 0
}

.block.remove-gap {
    padding-top: 0
}

.block.no-padding {
    padding: 0
}

.block.remove-bottom {
    padding-bottom: 0
}

.block.gray,
.gray {
    background-color: #f9f9f9
}

.block.gray2,
.gray2 {
    background-color: #f4f4f4
}

.block.dark {
    background: #231C1e
}

.block.half-gray:before {
    background: #f9f9f9;
    content: "";
    height: 50%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.remove-ext {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}

iframe {
    width: 100%;
    border: 0;
}

.parallax-container {
    height: 100%;
    z-index: -2;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.blackish:before,
.whitish:before,
.grayish:before {
    background: #1b1b1a none repeat scroll 0 0;
    content: "";
    height: 100%;
    opacity: 0.8;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.coloured:before {
    opacity: 0.9
}

.whitish:before {
    background-color: #FFFFFF;
    opacity: 0.95;
}

.grayish:before {
    background-color: #fafafa;
    opacity: 0.95;
}

iframe {
    border: 0;
    width: 100%;
    float: left;
}

a:hover,
a:focus {
    color: unset
}

img {
    vertical-align: middle;
    border: 0
}

.double-parallax .parallax-container {
    width: 50%
}

.double-parallax .parallax-container:last-child {
    left: 50%
}

.double-parallax .parallax-container:nth-child(2n+2) {
    left: 50%
}


/*=============== Cross Browser Compatibility ===================*/

.appointment-form form .input-field,
.icon-btn,
.staff-carousel .owl-nav>div,
.staff-carousel .owl-nav>div:before,
.doctor-intro strong a,
.doctors-img>img,
.doctor-detail,
.doctors-intro,
.way-detail h3 a,
.links-box-inner>ul li a,
.tip-detail>h3 a,
.social-icons>a:before,
.gallery-widget img,
.med-service>h4 a,
.med-service>a,
.dep-inner>span,
.dep-inner>i,
.dep-inner>h4,
.dep-inner>a,
.tip-img:before,
.fancy-post:before,
.fancy-post:after,
.fancy-post>span i:after,
.fancy-post>span:before,
.fancy-post>span:after,
.fancy-post-intro,
.fancy-post>span strong a,
.list li>a,
.widget ul li>a,
.tip-detail h3 a,
.toggle-item h3:before,
.creative-box,
.choose-inner>h4 a,
.choose-box:before,
.choose-box,
.choose-box>span i,
.project:before,
.product-name>h4 a,
.product-img:before,
.product-hover>span,
.cats>a,
.pagetop ul li a,
.surgeon img,
.fancy-post>img,
.meta>li a,
.gallery-hover,
.hover-inner span,
.hover-inner h4,
.facny-btn-set>a,
.theme-layout,
.event-detail>h4 a,
.event .map,
.event-detail-img .map>div,
.tagcloud>a:after,
.tagcloud>a,
.tagcloud>a:before,
.other-logins>a,
.topbar-links>a,
.menu>ul>li>a,
.full-menu.style2 .container>ul>li>a:before,
.full-menu.style2 .container>ul>li>a:after,
.full-menu.style3 .container>ul>li>a,
.full-menu.style3 .container>ul>li>a:before,
.logo img,
.consult-bar,
.menu-bar .container .consult-bar-info,
.widget-post-name h5 a,
.widget>ul.style2 li:after,
.med-event>h4 a,
.med-event-date,
.responsive-topbar-info div p,
.responsive-topbar-info>div>i,
.responsive-topbar-info>div,
.responsive-social>a,
.responsive-links,
nav ul li ul li a,
nav ul li ul li a:after,
.topbar.style2 .social-icons a,
form button,
.coloured-btn,
.doctors-timetable .tabs li a,
.doctors-timetable .tabs li a i {
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}

.tip-meta>span img,
.social-icons>a:before,
.author img,
.toggle-item h3:before,
.meta>li img,
.org>img,
.map-icon,
.event-detail-img>span,
.cart-product>span,
.cons-info>span,
.responsive-links>span,
.select-donate-price>span.other-amount:before,
.select-donate-price>span.other-amount:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.appointment-form:before,
form .input-field input,
form .input-field textarea,
.service,
.service a,
.icon-btn,
form button,
.coloured-btn,
.member-img,
.member-img img,
.staff-carousel .owl-nav>div,
.tip-img,
.links-box-inner>ul li a,
.social-icons>a,
.med-service>a,
.opening-shortcode .opening,
.simple-services,
.choose-box>span i,
.choose-box:before,
.project-hover>a,
.product-img,
.product-hover>a,
.product-hover>a.product-cart span,
.contact-box>span,
.contact-box,
.single-product-thumbs a,
.input-group,
.add-to-wishlist,
.info-list>li strong i,
.staff-tab-content .appointment-tab,
.appointment-popup,
.gift-popup,
.facny-btn-set,
.event,
.event-bottom,
.other-logins>a,
.specialist-detail li.vac i,
.contact-infobox,
.coupon-box,
.cart-totals,
.cart-totals caption,
.free-consultation,
.consult-bar-btn>a,
.med-event-date,
.layer4:before,
.layer13,
.select-wrapper,
.list-view .tip-detail,
.toggle-item h3,
.dark-btn,
.cash-popup,
.button-set a,
.select-donate-price textarea,
.cash-popup input {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}


/*=============== Header Styles ===================*/

header {
    float: left;
    width: 100%;
    position: relative;
    z-index: 999;
}


/*=== Topbar ==*/

.topbar {
    background: #040722;
    float: left;
    padding: 5px 0;
    width: 100%;
}

.topbar-links {
    display: table-cell;
    vertical-align: middle;
}

.topbar .social-icons {
    display: table-cell;
    float: none;
    text-align: right;
    vertical-align: middle;
    width: auto;
}

.topbar .social-icons a {
    color: #bfbfbf;
    display: inline-block;
    float: none;
    font-size: 11px;
    height: 31px;
    line-height: 31px;
    margin-right: 1px;
    text-align: center;
    vertical-align: middle;
    width: 31px;
}

.topbar .social-icons a:hover {
    color: #FFF
}

.topbar .container {
    display: table
}

.topbar-links>a {
    color: #d6d6d6;
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 4px 20px;
    position: relative;
}

.topbar-links>a:before {
    background: #474747;
    content: "";
    height: 10px;
    margin-top: -5px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}

.topbar-links>a:last-child:before {
    display: none
}

.menu-bar {
    float: left;
    width: 100%;
    background: #FFF;
}

.menu-bar .container {
    display: table
}

.logo {
    display: table-cell;
    vertical-align: middle;
}

.logo>a {
    display: inline-block;
    padding: 15px 0;
}

.logo img {
    max-width: 200px
}

.menu {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    box-shadow: none;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 100%;
}

.menu>ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.menu>ul>li {
    color: #555555;
    display: inline-block;
    float: none;
    font-family: arimo;
    font-size: 13px;
    font-weight: 500;
}

.menu>ul>li>a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: inherit;
    line-height: 20px;
    padding: 45px 15px;
    letter-spacing: 0.3px;
    font-size: 13px;
    font-weight: 500;
}


/*=== Consult Bar ==*/

.consult-bar {
    background: #0000ff;
    padding: 25px 70px 25px 20px;
    position: absolute;
    left: 50%;
    top: 100%;
    width: 1170px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.consult-bar-info {
    float: left;
    width: 75%;
    margin-bottom: -10px;
}

.consult-box {
    display: table;
    float: left;
    padding: 2px 10px 0;
    position: relative;
    text-align: center;
    width: 33.334%;
}

.consult-box-inner {
    display: inline-block;
    text-align: left;
}

.consult-box span {
    color: #ffffff;
    display: table-cell;
    font-size: 30px;
    vertical-align: middle;
}

.consult-box strong {
    color: #ffffff;
    display: table-cell;
    font-family: roboto slab;
    font-size: 14px;
    font-weight: 600;
    padding-left: 15px;
    vertical-align: middle;
}

.consult-box strong i {
    display: block;
    font-family: arimo;
    font-size: 12px;
    font-style: normal;
    font-weight: 200;
    margin-top: 2px;
}

.consult-box:before,
.consult-box:after {
    background: rgba(0, 0, 0, 0.2);
    content: "";
    height: 15px;
    margin-top: -7.5px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}

.consult-box:after {
    background: rgba(255, 255, 255, 0.2);
    right: 1px;
}

.consult-box:last-child:before,
.consult-box:last-child:after {
    display: none
}

.consult-bar-btn {
    float: left;
    text-align: right;
    width: 25%;
}

.consult-bar-btn>a {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    color: #ffffff;
    float: right;
    font-family: roboto;
    font-size: 12px;
    padding: 15px 25px;
}

.consult-bar-btn>a i {
    margin-right: 10px
}

.menu-bar.with-consultbar {
    padding-bottom: 30px
}

.menu-bar.with-consultbar .consult-bar {
    -webkit-transform: translateY(-30px) translateX(-50%);
    -moz-transform: translateY(-30px) translateX(-50%);
    -ms-transform: translateY(-30px) translateX(-50%);
    -o-transform: translateY(-30px) translateX(-50%);
    transform: translateY(-30px) translateX(-50%);
}


/*=== Topbar Style2 ==*/

.style2 .topbar-links>a,
.style2 .topbar-links>a:hover {
    color: #ffffff
}

.style2 .topbar-links>a:before {
    background: #efefef
}

.topbar.style2 .social-icons a {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    border: 1px solid transparent;
    overflow: hidden;
}

.topbar.style2 .social-icons a:hover {
    border-color: #FFF
}

.topbar-btn {
    display: table-cell;
    padding-left: 10px;
    text-align: right;
    vertical-align: middle;
    width: 220px;
}

.topbar-btn>a {
    background: rgba(70, 70, 70, 0.9) none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    font-family: roboto;
    font-weight: 300;
    font-size: 12px;
    padding: 12px 30px;
    margin: -5px 0;
}

.topbar-btn>a i {
    margin-right: 10px
}

.topbar.style2 .topbar-btn>a {
    background: rgba(0, 0, 0, 0.2)
}

.topbar-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}

.topbar-info>li {
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 11px;
    letter-spacing: 0;
    margin-right: 20px;
}

.topbar-info>li strong {
    font-weight: 600
}

.topbar-info>li i {
    margin-right: 5px
}


/*=== Topbar Style3 ==*/

.topbar.style3 {
    background: #FFF;
    border-bottom: 1px solid #eee;
}

.style3 .topbar-info>li {
    color: #555
}

.style3 .social-icons a {
    background: #f8f8f8;
    color: #707070;
}

.style3 .topbar-links>a:before {
    background: #dddddd
}

.style3 .topbar-links>a {
    color: #555555
}

.menu-bar .container .consult-bar-info {
    display: table-cell;
    float: none;
    padding: 40px 0;
    vertical-align: middle;
    width: auto;
}

.menu-bar .container .consult-box strong {
    color: #444444
}


/*=== Topbar Style4 ==*/

.topbar.style4 {
    background: #f6f6f6
}

.style4 .social-icons a {
    background: #FFF;
    color: #707070;
}

.style4 .topbar-info>li {
    color: #555
}

.style4 .topbar-links>a:before {
    background: #dddddd
}

.style4 .topbar-links>a {
    color: #555555
}


/*=== Full Menu Bar ==*/

.full-menu {
    float: left;
    height: auto;
    line-height: normal;
    position: relative;
    width: 100%;
    padding-bottom: 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

.full-menu:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.2);
}

.full-menu .container>ul {
    display: table-cell;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.full-menu .container {
    display: table
}

.full-menu .container>ul>li {
    float: left
}

.full-menu .container>ul>li>a {
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    padding: 25px 22px;
    text-transform: capitalize;
    float: left;
}

.full-menu .container>ul>li>a:hover {
    color: #FFF
}

.full-menu .topbar-btn>a {
    line-height: 25px;
    margin: 0;
    padding: 20px 31px;
    background: rgba(0, 0, 0, 0.1);
}

.topbar-btn>a i {
    float: left;
    height: auto;
    line-height: inherit;
    margin-right: 10px;
}


/*=== Full Menu Bar Style2 ==*/

.full-menu.style2 .container>ul>li>a {
    color: #373737;
    padding: 20px 22px;
    position: relative;
    z-index: 1;
}

.full-menu.style2 {
    background: #ffffff;
    overflow: visible;
    padding: 0;
}

.full-menu.style2:before {
    background: #ffffff;
    margin-top: 2px;
    top: 100%;
}

.full-menu.style2 .container>ul>li>a:before {
    content: "";
    height: 0;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.full-menu.style2 .topbar-btn>a {
    line-height: 15px
}

.full-menu.style2 .container>ul>li>a:after {
    content: "";
    height: 3px;
    margin-top: 2px;
    width: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
}

.full-menu.style2 .container>ul>li>a:hover,
.full-menu.style2 .container>ul>li.active>a {
    color: #FFF
}

.full-menu.style2 .container>ul>li:hover>a:after,
.full-menu.style2 .container>ul>li.active>a:after {
    width: 100%;
    left: 0;
    opacity: 1;
}

.full-menu.style2 .container>ul>li:hover>a:before,
.full-menu.style2 .container>ul>li.active>a:before {
    opacity: 1;
    height: 100%;
}


/*=== Header Search ==*/

.header-search {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 50px;
}

.header-search>a {
    background: rgba(0, 0, 0, 0.2);
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    width: 50px;
}

.full-menu.style2 .header-search>a {
    background: #f6f6f6;
    color: #999999;
}

.fancy-search {
    display: none;
    padding-top: 20px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

.fancy-search form {
    background: rgba(255, 255, 255, 0.25) none repeat scroll 0 0;
    border-radius: 6px;
    float: left;
    padding: 30px 50px;
    position: relative;
    width: 100%;
}

.fancy-search form input {
    border: 0 none !important;
    box-shadow: none!important;
    color: #151414;
    float: left;
    font-size: 13px;
    height: 55px;
    margin: 0;
    vertical-align: middle;
    width: 75%;
}

.fancy-search form button {
    float: right;
    margin: 0;
    max-width: 25%;
    padding: 20px 35px;
    vertical-align: middle;
}

.header-search>a.active i:before {
    content: "\f00d"
}

.pagetop.extra-gap {
    padding-top: 270px
}


/*=== Header Style2 ==*/

header.style2 {
    position: absolute;
    left: 0;
    top: 0;
}

.style2 .menu-bar {
    background: none
}

header.style2:before {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
    content: "";
    height: 100%;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.fancy-info {
    display: table-cell;
    padding-left: 30px;
    text-align: right;
    vertical-align: middle;
    width: 100%;
}

.fancy-info li {
    color: #e5e5e5;
    display: inline-block;
    font-family: roboto;
    font-size: 13px;
    padding: 30px;
    position: relative;
    text-align: left;
    vertical-align: middle;
}

.fancy-info li a {
    color: inherit
}

.fancy-info>li:before {
    background: #e5e5e5;
    content: "";
    height: 10px;
    margin-top: -5px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}

.fancy-info>li:last-child:before {
    display: none
}

.fancy-info li i {
    margin-right: 10px
}

.fancy-info li span {
    font-size: 40px;
    vertical-align: middle;
}

.fancy-info strong {
    display: inline-block;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    vertical-align: middle;
    padding-left: 10px;
    text-align: left;
}

.fancy-info strong i {
    margin: 5px 0 0;
    font-weight: 200;
    color: #FFF;
    display: table;
    font-style: normal;
}


/*=== Full Menu Bar Style 3 ==*/

.full-menu.style3 {
    background: none
}

.full-menu.style3:before {
    display: none
}

.full-menu.style3>.container {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(247, 247, 247, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
    padding-left: 20px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.full-menu.style3>.container:before {
    background: rgba(255, 255, 255, 0.2);
    content: "";
    height: 40px;
    padding: 0 20px;
    width: 100%;
    z-index: -1;
    position: absolute;
    bottom: -7px;
    left: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}

.full-menu.style3>.container>ul>li,
.full-menu.style3>.container>ul>li.active {
    background: none!important;
    color: #3c3c3c;
    font-family: roboto;
    font-size: 13px;
}

.full-menu.style3>.container>ul>li>a,
.full-menu.style3>.container>ul>li.active>a {
    background: none!important;
    color: inherit;
    font-size: 14px;
    padding: 28px 22px;
    position: relative;
}

.full-menu.style3>.container>ul>li>a:before {
    content: "";
    height: 3px;
    width: 0;
    opacity: 0;
    position: absolute;
    bottom: -3px;
    left: 0;
}

.full-menu.style3>.container>ul>li:hover>a:before {
    opacity: 1;
    width: 100%;
}

.full-menu.style3 .header-search {
    width: 70px
}

.full-menu.style3 .header-search>a {
    background: none;
    color: #3c3c3c;
    font-size: 16px;
    height: 73px;
    line-height: 74px;
    width: 70px;
}

.app-btn {
    display: table-cell;
    vertical-align: middle;
}

.app-btn>a {
    color: #FFF;
    display: inline-block;
    font-family: roboto;
    font-size: 12px;
    font-weight: 700;
    height: auto;
    line-height: 30px;
    padding: 22px 20px;
    text-align: center;
    width: 100%;
}

.app-btn>a i {
    height: auto;
    line-height: normal;
    margin-right: 10px;
}


/*=== Sticky Header ==*/

.menu-bar-height,
.full-menu-height {
    float: left;
    width: 100%;
}

.sticky .menu-bar {
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    -webkit-box-shadow: 0 0 5px #e0e0e0;
    -moz-box-shadow: 0 0 5px #e0e0e0;
    -ms-box-shadow: 0 0 5px #e0e0e0;
    -o-box-shadow: 0 0 5px #e0e0e0;
    box-shadow: 0 0 5px #e0e0e0;
}

.sticky .menu-bar .consult-bar {
    opacity: 0;
    visibility: hidden;
}

.sticky .menu>ul>li>a {
    padding: 25px 15px
}

.sticky .logo img {
    max-width: 160px
}

.sticky .menu-bar .container .consult-bar-info {
    padding: 10px 0
}

.sticky2 .full-menu {
    position: fixed;
    top: 0;
}


/*=============== Responsive Header ===================*/

.responsive-header {
    float: left;
    width: 100%;
    display: none;
}

.responsive-topbar {
    float: left;
    width: 100%;
}

.responsive-topbar-info {
    float: left;
    width: 100%;
}

.responsive-topbar-info>div {
    float: left;
    text-align: center;
    width: 20%;
    position: relative;
    cursor: pointer;
}

.responsive-topbar-info>div.active {
    width: 80%
}

.responsive-topbar-info>div>i {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    color: #ffffff;
    float: left;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    width: 100%;
}

.responsive-topbar-info div p {
    color: #ffffff;
    font-family: roboto;
    font-size: 11px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.responsive-topbar-info div p strong {
    font-family: roboto;
    font-weight: 700;
    margin-right: 10px;
}

.responsive-topbar-info div p i {
    font-size: 15px;
    margin-right: 10px;
}

.responsive-topbar-info>div.active>i {
    background: none;
    opacity: 0;
}

.responsive-topbar-info div.active p {
    opacity: 1
}

.topbar-social-search {
    background: #252a2c;
    float: left;
    width: 100%;
    padding: 7px 30px;
}

.responsive-social {
    float: left;
    width: 50%;
}

.responsive-social>a {
    background: #3d3d3d;
    color: #ffffff;
    float: left;
    font-size: 9px;
    height: 19px;
    line-height: 20px;
    margin-right: 5px;
    text-align: center;
    width: 19px;
}

.topbar-social-search>form {
    float: left;
    position: relative;
    width: 50%;
}

.topbar-social-search>form input {
    border: 0 none;
    color: #ffffff;
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    height: 20px;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.topbar-social-search>form button {
    background: none;
    margin: 0;
    padding: 0 10px;
    position: relative;
}

.topbar-social-search>form button:before {
    background: #636363;
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 4px;
    width: 1px;
}

.responsive-menu {
    float: left;
    padding: 30px 20px 0;
    text-align: center;
    width: 100%;
}

.responsive-menu .logo {
    display: inline-block;
    margin-bottom: 20px;
}

.responsive-menu-btns {
    float: left;
    width: 100%;
}

.responsive-menu-btns a {
    background: #225b91 none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    font-family: roboto;
    font-size: 11px;
    font-weight: 300;
    margin: 0 -3px;
    width: 50%;
    padding: 14px 10px 13px;
    vertical-align: middle;
}

.responsive-menu-btns a i {
    margin-right: 5px
}

.responsive-menu-btns a.open-menu {
    background: #333333 none repeat scroll 0 0;
    padding: 12px 15px;
    width: 100%;
}

.responsive-menu-btns a.open-menu>i {
    font-size: 19px;
    margin: 0;
}

.responsive-links {
    background: #1f1f1f none repeat scroll 0 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    text-align: center;
    opacity: 0;
    position: fixed;
    left: 0;
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.responsive-links.slidein {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.responsive-links>ul {
    height: 100%;
    left: 0;
    list-style: outside none none;
    margin: 0;
    overflow: scroll;
    padding: 70px 30px 30px;
    text-align: left;
    position: absolute;
    top: 0;
    width: 100%;
}

.responsive-links>ul li {
    border-bottom: 1px solid #373737;
    float: left;
    width: 100%;
}

.responsive-links>ul li:last-child {
    border: 0
}

.responsive-links>ul li a {
    color: #cdcdcd;
    float: left;
    font-family: arimo;
    font-size: 13px;
    padding: 12px 20px;
    position: relative;
    width: 100%;
}

.responsive-links>ul li.has-child>a:before {
    color: #ffffff;
    content: "\f067";
    font-family: fontawesome;
    font-size: 14px;
    height: 10px;
    position: absolute;
    right: 20px;
    top: 10px;
    width: 10px;
}

.responsive-links>ul li.has-child.open>a:before {
    content: "\f068"
}

.responsive-links>span {
    display: inline-block;
    width: 42px;
    height: 42px;
    background: #303030;
    cursor: pointer;
    text-align: center;
    line-height: 42px;
    color: #fFF;
    position: relative;
    z-index: 10;
    margin-top: 20px;
}

.responsive-links>ul li ul {
    list-style: none;
    display: none;
    padding: 0 0 0 20px;
    float: left;
    width: 100%;
}

nav ul li ul {
    background: #ffffff;
    list-style: outside none none;
    border-bottom: 3px solid #000;
    min-width: 240px;
    padding: 20px 0;
    position: absolute;
    top: 100%;
    z-index: 100;
    -webkit-transition: all 600ms cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
}

nav ul li:hover>ul {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

nav ul li ul li {
    display: table;
    float: none;
    padding: 0 25px;
    position: relative;
    text-align: left;
    width: 100%;
}

nav ul li ul li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    border-bottom: 1px solid #e1e1e1;
    color: #444444;
    font-family: roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 12px 12px 12px 0;
    position: relative;
    width: 100%;
}

nav ul li ul li:last-child a {
    border: 0 none
}

nav ul li ul li.has-dropdown>a:before,
nav ul li ul li.has-dropdown>a:after {
    background: #cccccc;
    content: "";
    height: 3px;
    position: absolute;
    right: 5px;
    top: 17px;
    width: 3px;
}

nav ul li ul li.has-dropdown>a:after {
    right: 0;
    opacity: 0;
}

nav ul li ul li.has-dropdown:hover>a:after {
    right: 5px;
    opacity: 1;
}

nav ul li ul ul {
    background: #fafafa;
    left: 100%;
    top: 0;
}

nav ul li ul.mega {
    width: 480px
}

nav ul li ul.mega>li {
    float: left;
    width: 50%;
}

nav>ul ul.mega li:nth-child(2n) ul {
    left: auto;
    right: 100%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

nav>ul ul.mega li:nth-child(2n):hover ul {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}


/*=============== Creative Slider ===================*/

.creative-slider {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.creative-slider.contain-form {
    padding-bottom: 60px
}

.appointment-form {
    float: left;
    padding: 65px 50px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.creative-slider .appointment-form {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 418px;
    margin-left: -209px;
}

.appointment-form:before {
    content: "";
    height: 100%;
    opacity: 0.95;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.appointment-form.overlap {
    margin-top: -115px
}

.simple-title {
    float: left;
    width: 100%;
    margin-bottom: 25px;
}

.simple-title h4 {
    color: #ffffff;
    float: left;
    font-size: 20px;
    margin: 0 0 8px;
    text-transform: uppercase;
    width: 100%;
}

.simple-title>span {
    color: #e9e9e9;
    float: left;
    font-family: roboto;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 14px;
    text-transform: uppercase;
    width: 100%;
}

.appointment-form form {
    float: left;
    width: 100%;
}

.select-wrapper {
    position: relative;
    background: #FFF;
    float: left;
    width: 100%;
}

.appointment-popup .select-wrapper .caret i {
    color: #FFF
}

.input-field .select-wrapper input {
    background: none!important;
    z-index: 2;
}

form .input-field {
    margin-top: 5px;
    position: relative;
    padding: 0 2.5px!important;
}

form .input-field input,
form .input-field textarea,
form .input-field input.select-dropdown {
    background: #ffffff none repeat scroll 0 0;
    border: 0 none;
    box-sizing: border-box;
    color: #858585;
    float: left;
    line-height: 20px;
    font-family: roboto;
    font-size: 11px;
    height: 45px;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 10px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

form .input-field textarea {
    height: auto;
    padding: 20px;
    min-height: 200px;
    max-width: 100%;
}

.appointment-form form .row {
    margin: 0 -5px
}

.appointment-form form .input-field.selected {
    margin-top: 30px
}

.picker {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000000;
}

.appointment-form form .picker__frame button {
    background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
    border: 1px solid #ffffff;
    border-radius: 0;
    color: #3f3f3f;
    font-weight: 800;
    padding: 0;
    width: 33.334%;
}

.input-field span {
    position: absolute;
    right: 20px;
    top: 15px;
}

.input-field.success span {
    color: #4fc600
}

.input-field.success input,
.input-field.success textarea {
    border: 1px solid #4fc600
}

.input-field.error span {
    color: #ff0000
}

.input-field.error input,
.input-field.error textarea {
    border: 1px solid #ff0000
}

.notification {
    color: #ff0000;
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-style: italic;
    margin-top: 5px;
    text-align: left;
    width: 100%;
}

.layer1 {
    color: rgba(255, 255, 255, 0.1);
    font-family: roboto slab;
    text-transform: uppercase;
    font-weight: 900;
}

.layer2 {
    font-family: roboto slab;
    color: #FFF;
}

.layer3 {
    font-family: roboto;
    color: #FFF;
    font-weight: 900;
}

.layer4 {
    color: #FFF;
    font-family: roboto;
}

.layer4:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
}

.layer5 {
    color: #FFF;
    font-family: arimo;
    text-align: center;
}

.layer6 {
    color: #FFF;
    font-family: roboto;
    font-weight: 100;
}

.layer6 i {
    font-weight: 500!important;
    font-family: roboto slab;
    font-style: normal;
}

.layer7 {
    color: #FFF;
    font-family: roboto;
    font-weight: 800;
}

.layer7:before {
    content: "";
    position: absolute;
    left: -30px;
    width: 30px;
    top: 0;
    height: 100%;
    border-radius: 3px 0 0 20px;
}

.layer8 {
    text-transform: uppercase;
    font-weight: 800;
    color: #FFF;
    font-family: roboto slab;
}

.layer8:before,
.layer8:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    width: 40px;
    background: #FFF;
    margin-right: 20px;
}

.layer8:after {
    left: 100%;
    right: auto;
    margin-right: 0;
    margin-left: 20px;
}

.layer9 {
    text-transform: uppercase;
    font-family: roboto slab;
    font-weight: 900;
}

.layer10 {
    color: #252525;
    text-transform: uppercase;
    font-family: roboto slab;
    font-weight: 900;
}

.layer11:before,
.layer11:after {
    content: "";
    position: absolute;
    left: -60px;
    top: 50%;
    margin-top: -1px;
    width: 40px;
    height: 2px;
}

.layer11:after {
    left: auto;
    right: -60px;
}

.layer12 {
    font-family: arimo;
    color: #1e1e1e;
    text-align: center;
}

.layer13 {
    font-family: roboto slab;
    text-transform: uppercase;
    font-weight: 600;
    color: #FFF;
}

.layer13:hover {
    background: #FFF;
}


/*=============== Timetable ===================*/

.timetable {
    border-color: transparent transparent #efeff0 #efeff0;
    border-style: solid;
    border-width: 5px;
    float: left;
    padding: 55px 20px 50px 50px;
    position: relative;
    width: 100%;
}

.timetable:before,
.timetable:after {
    background: #efeff0;
    content: "";
    height: 5px;
    left: -5px;
    position: absolute;
    top: -5px;
    width: 50%;
}

.timetable:after {
    bottom: -5px;
    height: 50px;
    left: auto;
    right: -5px;
    top: auto;
    width: 5px;
}

form .input-field.simple-label label {
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 11px;
    line-height: 24px;
    position: relative;
    width: 100%;
    padding: 10px 0;
    top: 0;
    left: 0;
    text-align: left;
}

.dropdown-content {
    padding: 0;
    list-style: none;
}

.select-wrapper span.caret {
    background: -moz-linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 1) 100%);
    /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(250, 250, 250, 1)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(240, 240, 240, 1)));
    /* safari4+,chrome */
    background: -webkit-linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 1) 100%);
    /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 1) 100%);
    /* opera 11.10+ */
    background: -ms-linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 1) 100%);
    /* ie10+ */
    background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(250, 250, 250, 1) 100%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f0f0f0', GradientType=0);
    /* ie6-9 */
    border: 1px solid #eaeaea;
    color: #8f8f8f;
    height: 32px;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    right: 5px;
    top: 7px;
    width: 32px;
    z-index: 2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.appointment-form p {
    font-size: 11px;
    color: #FFF;
}

form button {
    background: none;
    border: 1px solid #FFF;
    color: #ffffff;
    float: right;
    font-family: roboto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 20px;
    padding: 15px 30px;
    text-transform: uppercase;
}

form button:hover {
    background: #333;
    border: 1px solid transparent;
}

.date-icon:before {
    color: #cfcfcf;
    content: "\f133";
    font-family: fontawesome;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 10px;
    width: 20px;
}


/*=============== All Services ===================*/

.all-services {
    float: left;
    width: 100%;
    margin-bottom: -10px;
}

.service {
    float: left;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.service:before,
.service:after {
    background: #fafafa;
    content: "";
    opacity: 0.98;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
    /* easeOutExpo */
    -webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
    /* easeOutExpo */
}

.service:after {
    background: #000;
    opacity: 0.6;
    height: 0;
    top: auto;
    bottom: 0;
}

.service:hover:after {
    height: 100%
}

.service:hover:before {
    height: 0
}

.service>img {
    float: left;
    width: 100%;
}

.all-services .row {
    margin: 0 -5px
}

.all-services .row>div {
    padding: 0 5px
}

.service-hover {
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
}

.service:hover .service-hover {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(-150%);
    -moz-transform: translateY(-150%);
    -ms-transform: translateY(-150%);
    -o-transform: translateY(-150%);
    transform: translateY(-150%);
}

.service-hover i {
    color: #555;
    font-size: 50px;
}

.service-hover>span {
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-top: 20px;
    text-transform: uppercase;
    width: 100%;
}

.service-hover h5 {
    color: #505050;
    float: left;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 10px 0 0;
    width: 100%;
}

.service a {
    border: 2px solid #bcbcbc;
    color: #ffffff;
    font-family: roboto;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 13px 20px;
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 150%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.service a i {
    margin-left: 5px
}

.service:hover a {
    opacity: 1;
    top: 50%;
    -webkit-transition: top 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000), all 0.3s linear;
    -moz-transition: top 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000), all 0.3s linear;
    -o-transition: top 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000), all 0.3s linear;
    transition: top 800ms cubic-bezier(0.860, 0.000, 0.070, 1.000), all 0.3s linear;
    /* easeInOutQuint */
    -webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    -o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
    /* easeInOutQuint */
}

.service a:hover {
    color: #ffffff
}


/*=============== Timetable ===================*/

.classic-title {
    float: left;
    margin-bottom: 45px;
    width: 100%;
}

.classic-title h2 span {
    color: #2d2d2d;
    display: table;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 20px;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.classic-title h2 {
    float: left;
    font-size: 33px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 34px;
    margin: 0;
    width: 100%;
}

.timetable .classic-title h2 span {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.7px;
}

.timetable .classic-title h2 {
    font-size: 27px
}

.timetable .classic-title {
    margin-bottom: 20px
}

.timetable p {
    color: #454545;
    float: left;
    margin: 0;
    width: 100%;
}

.timetable>ul {
    float: left;
    font-family: roboto;
    font-size: 13px;
    list-style: outside none none;
    margin: 20px 0 0;
    padding: 0;
    width: 100%;
}

.timetable li {
    color: #2d2d2d;
    float: left;
    font-family: roboto;
    font-size: 13px;
    line-height: 25px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

.timetable li:last-child {
    margin: 0
}

.timetable li i {
    display: inline-block;
    font-family: roboto;
    font-style: normal;
    padding-left: 30px;
    text-align: right;
    width: auto;
}

.timetable li span {
    float: left;
    text-align: left;
    width: 50%;
}

.icon-btn {
    color: #ffffff;
    display: inline-block;
    font-family: roboto!important;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 21px 30px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.icon-btn:hover {
    border: 0 none;
    color: #ffffff;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.icon-btn:before {
    background: -moz-linear-gradient(90deg, rgba(199, 195, 193, 0.1) 0%, rgba(128, 128, 128, 0.2) 100%);
    /* ff3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(128, 128, 128, 0.2)), color-stop(100%, rgba(199, 195, 193, 0.1)));
    /* safari4+,chrome */
    background: -webkit-linear-gradient(90deg, rgba(199, 195, 193, 0.1) 0%, rgba(128, 128, 128, 0.2) 100%);
    /* safari5.1+,chrome10+ */
    background: -o-linear-gradient(90deg, rgba(199, 195, 193, 0.1) 0%, rgba(128, 128, 128, 0.2) 100%);
    /* opera 11.10+ */
    background: -ms-linear-gradient(90deg, rgba(199, 195, 193, 0.1) 0%, rgba(128, 128, 128, 0.2) 100%);
    /* ie10+ */
    background: linear-gradient(0deg, rgba(199, 195, 193, 0.1) 0%, rgba(128, 128, 128, 0.2) 100%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#C7C3C1', GradientType=0);
    /* ie6-9 */
    content: "";
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.icon-btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.icon-btn i {
    font-size: 12px;
    margin-right: 5px;
}

.timetable .icon-btn {
    margin-top: 40px
}


/*=============== Doctor's Intro ===================*/

.doctors-intro {
    float: left;
    width: 100%;
    position: relative;
}

.doctors-intro:hover {
    background: #ffffff
}

.doctors-img {
    background: #FFF;
    float: left;
    padding: 40px 40px 0;
    text-align: center;
    width: 70%;
    position: relative;
}

.doctors-img>img {
    max-width: 100%
}

.doctor-detail {
    height: 100%;
    left: 50%;
    padding: 40px 0 40px 10px;
    position: absolute;
    z-index: 1;
    text-align: center;
    width: 50%;
}

.doctor-detail:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.doctors-img:before {
    background: #ffffff none repeat scroll 0 0;
    content: "";
    height: 100%;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
}

.doctor-description {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 95%;
}

.doctor-description>span {
    float: left;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 700;
    line-height: 17px;
    margin-bottom: 10px;
    width: 100%;
}

.doctor-description>h5 {
    float: left;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    width: 100%;
}

.doctor-description>i {
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    margin: 10px 0 15px;
    width: 100%;
}

.doctor-description>p {
    float: left;
    margin: 0 0 30px;
    width: 100%;
}

.coloured-btn {
    color: #ffffff;
    border: 1px solid transparent;
    display: inline-block;
    font-family: roboto;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px 25px;
}

.coloured-btn:hover {
    background: none;
    border: 1px solid #FFF;
}

.coloured-btn:hover {
    color: #ffffff
}

.coloured-btn i {
    margin-right: 10px
}

.coloured-btn i.fa-caret-right {
    margin-right: 0;
    margin-left: 5px;
}

.coloured-btn.dark {
    /* Permalink - use to edit and share this gradient:http://colorzilla.com/gradient-editor/#0f0f0f+0,070707+51,010101+100 */
    background: rgb(15, 15, 15);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(15, 15, 15, 1) 0%, rgba(7, 7, 7, 1) 51%, rgba(1, 1, 1, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(15, 15, 15, 1) 0%, rgba(7, 7, 7, 1) 51%, rgba(1, 1, 1, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(15, 15, 15, 1) 0%, rgba(7, 7, 7, 1) 51%, rgba(1, 1, 1, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0f0f', endColorstr='#010101', GradientType=0);
    /* IE6-9 */
}

.doctor-description .coloured-btn {
    margin-right: 5px;
    font-size: 11px;
    padding: 12px 18px;
}

.doctor-description .coloured-btn i {
    margin: 0 0 0 4px
}

.doctors-intro.overlap {
    margin-bottom: -90px
}

.doctors-intro:hover .doctors-img>img {
    -webkit-transform: translateX(-90px);
    -moz-transform: translateX(-90px);
    -ms-transform: translateX(-90px);
    -o-transform: translateX(-90px);
    transform: translateX(-90px);
}

.doctors-intro:hover .doctor-detail {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px);
}


/*=============== Staff Carousel ===================*/

.staff-carousel {
    float: left;
    width: 100%;
}

.staff-slide {
    float: left;
    width: 100%;
    margin-bottom: -40px;
}

.staff-member {
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

.member-img {
    border: 10px solid #ffffff;
    float: left;
    margin-right: 25px;
}

.member-img img {
    width: 100%
}

.doctor-intro {
    padding-top: 24px
}

.doctor-intro strong {
    display: table;
    font-family: roboto slab;
    color: #505050;
    font-size: 15px;
    margin-bottom: 10px;
}

.doctor-intro strong a {
    color: inherit
}

.doctor-intro strong span {
    display: table;
    font-size: 14px;
    line-height: 20px;
}

.doctor-intro i {
    display: block;
    font-family: roboto;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.staff-carousel .owl-nav {
    position: absolute;
    right: 0;
    top: -75px;
}

.staff-carousel .owl-nav>div {
    background: #ffffff none repeat scroll 0 0;
    color: rgba(0, 0, 0, 0);
    float: left;
    height: 29px;
    margin-left: 1px;
    position: relative;
    width: 29px;
}

.staff-carousel .owl-nav>div:before {
    color: #333333;
    content: "\f104";
    font-family: fontawesome;
    height: 100%;
    left: 0;
    line-height: 28px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.staff-carousel .owl-nav>div.owl-next:before {
    content: "\f105"
}

.staff-carousel .owl-nav>div:hover:before {
    color: #ffffff
}


/*=============== Ways To Support ===================*/

.parallax-title {
    float: left;
    margin-bottom: 44px;
    text-align: center;
    width: 100%;
}

.parallax-title>i {
    color: #eae9e9;
    float: left;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
    width: 100%;
}

.parallax-title>h2 {
    color: #ffffff;
    float: left;
    font-size: 33px;
    letter-spacing: 0.3px;
    margin: 0 0 15px;
    width: 100%;
}

.parallax-title>p {
    color: #d4d4d4;
    float: left;
    font-size: 15px;
    line-height: 26px;
    margin: 0;
    width: 100%;
}

.parallax-title.style2 i {
    color: #8b8b8b
}

.parallax-title.style2 h2 {
    color: #505050
}

.parallax-title.style2 p {
    color: #454545
}

.support-ways {
    float: left;
    padding: 0 180px;
    width: 100%;
}

.way {
    display: table;
    width: 100%;
}

.way>span {
    display: table-cell;
    vertical-align: top;
    -webkit-transition: all 600ms cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
}

.way:hover>span {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
}

.way span i {
    font-size: 45px;
    line-height: 50px;
}

.way-detail {
    display: table-cell;
    padding-bottom: 30px;
    padding-left: 15px;
    position: relative;
    vertical-align: top;
}

.way-detail:before,
.way-detail:after {
    background: #ffffff;
    content: "";
    height: 1px;
    width: 72px;
    position: absolute;
    bottom: 0;
    left: 15px;
}

.way-detail:after {
    width: 0;
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    /* easeInOutQuart */
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
    /* easeInOutQuart */
}

.way:hover .way-detail:after {
    width: 100%
}

.way-detail h3 {
    color: #ffffff;
    float: left;
    font-size: 18px;
    margin: 5px 0;
    width: 100%;
}

.way-detail h3 a {
    color: inherit
}

.way-detail i {
    float: left;
    color: #CCCACA;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    width: 100%;
}

.support-ways.style2 {
    padding: 0
}

.support-ways.style2 .row {
    margin: 0
}

.support-ways.style2 .row>div {
    padding: 0 0.5px
}

.support-ways.style2 .way {
    background: #fff none repeat scroll 0 0;
    display: unset;
    float: left;
    padding: 50px 40px;
    text-align: center;
    width: 100%;
}

.support-ways.style2 .way span {
    display: inline-block
}

.support-ways.style2 .way .way-detail {
    display: unset;
    float: left;
    margin-top: 20px;
    padding: 0;
    width: 100%;
}

.support-ways.style2 .way-detail:before,
.support-ways.style2 .way-detail:after {
    display: none
}

.support-ways.style2 .way-detail h3 {
    color: #444444;
    font-size: 16px;
}

.support-ways.style2 .way:hover span {
    -webkit-transform: translate(0) scale(1.4);
    -moz-transform: translate(0) scale(1.4);
    -ms-transform: translate(0) scale(1.4);
    -o-transform: translate(0) scale(1.4);
    transform: translate(0) scale(1.4);
}

.support-ways.style2 .way-detail i {
    color: #868686;
    font-size: 12px;
}


/*=============== Tips & News ===================*/

.modern-title {
    float: left;
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}

.modern-title>h2 {
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
    width: 100%;
}

.modern-title>span {
    color: #8b8b8b;
    float: left;
    font-size: 13px;
    line-height: 24px;
    width: 100%;
}

.blog-style {
    float: left;
    margin-bottom: -50px;
    width: 100%;
}

.tip {
    display: table;
    float: left;
    margin-bottom: 50px;
    width: 100%;
}

.tip-meta {
    display: table-cell;
    vertical-align: top;
    width: 54px;
}

.tip-detail {
    display: table-cell;
    padding-left: 25px;
    vertical-align: top;
}

.tip-meta>span {
    color: #626262;
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-weight: 400;
    text-align: right;
    width: 100%;
}

.tip-meta>span img {
    display: inline-block;
    margin-bottom: 10px;
}

.tip-meta>span a {
    color: inherit
}

.tip-date {
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-weight: 400;
    margin-top: 25px;
    padding-top: 50px;
    position: relative;
    text-align: right;
    text-transform: uppercase;
    width: 100%;
}

.tip-date:before {
    background: #c8c8c8;
    content: "";
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
}

.tip-img {
    float: left;
    width: 100%;
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
}

.tip-img img {
    width: 100%
}

.tip-img:before {
    background: #313131;
    content: "";
    height: 100%;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.tip-img:hover:before {
    opacity: 0.65
}

.tip-detail h3 {
    float: left;
    font-size: 15px;
    letter-spacing: 0.4px;
    line-height: 22px;
    margin: 0 0 10px;
    width: 100%;
}

.tip-detail h3 a {
    color: inherit
}

.tip-detail p {
    float: left;
    margin: 0;
    width: 100%;
}

.tip-detail .see-detail {
    display: inline-block;
    margin-top: 30px;
}

.list-view .tip-img {
    display: inline-block;
    float: none;
    margin-bottom: 0;
    vertical-align: middle;
    width: 50%;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.list-view .tip-img:before {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.list-view .tip-detail h3,
.list-view .tip-detail p {
    float: none;
    width: auto;
}

.list-view .tip-detail {
    background: #fbfbfb none repeat scroll 0 0;
    overflow: hidden;
    padding: 0;
}

.gray .list-view .tip-detail {
    background: #FFF
}

.list-view .tip-meta {
    padding-right: 30px;
    width: 84px;
}

.tip-desc {
    float: left;
    width: 100%;
}

.list-view .tip-desc {
    float: none;
    display: inline-block;
    margin-left: -5px;
    padding: 0 20px 0 30px;
    vertical-align: middle;
    width: 50%;
}

.l9 .tip-detail h3 {
    font-size: 18px;
    line-height: 26px;
}


/*=============== Links Box ===================*/

.links-box {
    float: left;
    position: relative;
    width: 100%;
}

.links-box>img {
    float: left;
    width: 100%;
}

.links-box-overlay {
    background: rgba(251, 251, 251, 0.95) none repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.links-box-overlay:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.links-box-inner {
    display: inline-block;
    padding: 45px;
    text-align: left;
    vertical-align: middle;
    width: 95%;
}

.links-box-inner>h3 {
    float: left;
    font-size: 22px;
    margin: 0 0 10px;
    width: 100%;
}

.links-box-inner>p {
    float: left;
    font-size: 12px;
    margin: 0 0 30px;
    width: 100%;
}

.links-box-inner>ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.links-box-inner>ul li {
    float: left;
    width: 100%;
}

.links-box-inner>ul li a {
    background: #ffffff;
    color: #565657;
    float: left;
    font-size: 12px;
    margin-bottom: 1px;
    padding: 15px 25px;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.links-box-inner>ul li a i {
    font-size: 15px;
    margin-right: 10px;
}

.links-box-inner>ul li a:hover {
    color: #ffffff
}

.links-box-inner>ul li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    /* easeOutQuart */
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    /* easeOutQuart */
}

.links-box-inner>ul li a:hover:before {
    width: 100%
}


/*=============== Departments ===================*/

.departments {
    background: #fbfbfb;
    float: left;
    padding: 60px 80px;
    position: relative;
    width: 100%;
}

.departments>span {
    position: absolute;
    bottom: 0;
    right: -30px;
}

.departments.with-img {
    padding-right: 240px
}

.about-departments {
    float: left;
    width: 100%;
}

.about-departments h6 {
    float: left;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    width: 100%;
}

.about-departments h6 span {
    display: table;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.about-departments>p {
    color: #666666;
    float: left;
    font-size: 13px;
    margin: 0 0 30px;
    width: 100%;
}

.about-departments>a,
.see-detail,
.see-detail:hover {
    font-family: roboto;
    font-size: 11px;
    font-weight: 400;
    text-decoration: underline;
}

.about-departments>a i {
    margin-left: 5px
}

.list,
.widget ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.list>li,
.widget ul li {
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 25px;
    margin-bottom: 5px;
    padding-left: 20px;
    position: relative;
    width: 100%;
}

.widget ul li:last-child {
    margin: 0
}

.list>li:before,
.widget ul li:before {
    content: "\f0da";
    font-family: fontawesome;
    left: 0;
    line-height: 25px;
    position: absolute;
    top: 0;
    width: 20px;
}

.list li>a,
.widget ul li>a {
    float: left;
    width: 100%;
}

.list>li:hover>a,
.widget ul li:hover>a {
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.departments.overlap {
    margin-bottom: -80px;
    position: relative;
    z-index: 2;
}


/*=============== Medical Services ===================*/

.medical-services {
    float: left;
    text-align: center;
    margin-bottom: -30px;
    width: 100%;
}

.medical-services.overlap {
    margin-top: -90px
}

.med-service {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.med-service>a {
    float: left;
    margin-bottom: 25px;
    overflow: hidden;
    width: 100%;
    -webkit-transition: all 600ms cubic-bezier(0.980, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.980, -0.550, 0.265, 1.550);
    -moz-transition: all 600ms cubic-bezier(0.980, -0.550, 0.265, 1.550);
    -o-transition: all 600ms cubic-bezier(0.980, -0.550, 0.265, 1.550);
    transition: all 600ms cubic-bezier(0.980, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.980, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.980, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.980, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.980, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.980, -0.550, 0.265, 1.550);
    /* easeInOutBack */
}

.med-service img {
    width: 100%
}

.med-service:hover>a {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.med-service>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 15px;
    margin: 0 0 5px;
    width: 100%;
}

.med-service>h4 a {
    color: inherit
}

.med-service>i {
    color: #8c8c8c;
    float: left;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 100%;
}

.medical-services.light .med-service>h4 {
    color: #fff
}

.medical-services.light .med-service>i {
    color: #f7f7f7
}


/*=============== Creative Departments ===================*/

.creative-departments {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
}

.creative-departments ul {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.creative-departments ul li {
    display: inline-block;
    margin: 0 -2.2px;
    position: relative;
    width: 20%;
}

.creative-departments ul li:first-child:nth-last-child(1),
.creative-departments ul li:first-child:nth-last-child(1)~li {
    width: 100%
}

.creative-departments ul li:first-child:nth-last-child(2),
.creative-departments ul li:first-child:nth-last-child(2)~li {
    width: 50%
}

.creative-departments ul li:first-child:nth-last-child(3),
.creative-departments ul li:first-child:nth-last-child(3)~li {
    width: 33.334%
}

.creative-departments ul li:first-child:nth-last-child(4),
.creative-departments ul li:first-child:nth-last-child(4)~li {
    width: 25%
}

.creative-departments ul li:first-child:nth-last-child(5),
.creative-departments ul li:first-child:nth-last-child(5)~li {
    width: 20%
}

.creative-departments ul li:first-child:nth-last-child(6),
.creative-departments ul li:first-child:nth-last-child(6)~li {
    width: 16.666%
}

.creative-departments ul li>img {
    width: 100%;
    z-index: -1;
}

.creative-departments ul li:before,
.creative-departments ul li:after {
    background: rgba(248, 248, 248, 0.95) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    /* easeOutQuart */
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
    /* easeOutQuart */
}

.creative-departments ul li:hover:before {
    height: 0
}

.creative-departments ul li:after {
    background: rgba(0, 0, 0, 0.7);
    height: 0;
    top: auto;
    bottom: 0;
}

.creative-departments ul li:hover:after {
    height: 100%
}

.dep-details {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}

.dep-details:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.dep-inner {
    display: inline-block;
    vertical-align: middle;
    width: 90%;
}

.dep-inner>span {
    display: inline-block;
    margin-bottom: 35px;
    overflow: hidden;
    min-height: 20px;
    max-height: 60px;
}

.creative-dep:hover .dep-inner>span {
    margin: 0;
    max-height: 0;
    min-height: 0;
}

.dep-inner>span i {
    font-size: 60px;
    color: #000;
}

.dep-inner>i {
    color: #878787;
    float: left;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    width: 100%;
    text-transform: uppercase;
}

.dep-inner>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 14px;
    margin: 0;
    width: 100%;
}

.creative-departments ul li:hover .dep-inner>i,
.creative-departments ul li:hover .dep-inner>h4 {
    color: #ffffff
}

.dep-inner>a {
    float: left;
    font-family: roboto;
    font-size: 12px;
    margin-top: 0;
    text-decoration: underline;
    width: 100%;
    overflow: hidden;
    min-height: 0;
    max-height: 0;
    font-weight: 600;
}

.dep-inner>a i {
    display: inline-block;
    margin-left: 5px;
}

.creative-departments ul li:hover .dep-inner>a {
    min-height: 30px;
    margin-top: 30px;
}

.creative-departments .coloured-btn {
    margin-top: -40px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}


/*=============== Opening Shortcode ===================*/

.opening-shortcode {
    float: left;
    padding: 0 50px;
    width: 100%;
}

.opening-shortcode .modern-title>h2 {
    font-size: 26px
}

.opening-shortcode .opening {
    overflow: hidden;
    padding: 0;
}

.opening-shortcode .opening .timing {
    margin: 0 0 1px;
    padding: 11px 30px;
}

.opening-shortcode .modern-title {
    margin-bottom: 25px;
    padding: 0 10px;
}

.opening-shortcode .opening .timing:last-child {
    margin: 0
}

.opening-shortcode .opening .timing {
    color: #2d2d2d
}

.opening-shortcode .opening .timing:before {
    content: "---";
    letter-spacing: 1px;
    top: 13px;
}

.opening-shortcode .opening .timing:after {
    background: #ffffff;
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}


/*=============== Mockup ===================*/

.mockup {
    float: left;
    text-align: center;
    width: 100%;
}

.mockup>img {
    max-width: 100%
}

.mockup.overlap {
    margin: -30px 0 0
}

.mockup.overlap2 {
    float: none;
    margin: 0 -80px;
    width: auto;
}


/*=============== Creative Boxes ===================*/

.creative-boxes>div {
    padding: 0!important
}

.creative-box {
    float: left;
    position: relative;
    width: 100%;
}

.creative-box>img {
    width: 100%
}

.creative-box-overlay {
    background: rgba(39, 39, 39, 0.85);
    height: 100%;
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.creative-box-overlay:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.creative-box-hover {
    display: inline-block;
    padding: 20px 50px;
    vertical-align: middle;
    width: 90%;
}

.creative-box-hover h5 {
    color: #ffffff;
    float: left;
    font-family: roboto slab;
    font-size: 18px;
    margin: 40px 0 0;
    text-transform: uppercase;
    width: 100%;
}

.creative-box-hover>p {
    color: #cbc9c9;
    float: left;
    margin: 10px 0 0;
    width: 100%;
}

.creative-box-hover>i,
.creative-box-hover>img {
    display: table;
    margin: 0 auto;
    color: #FFF;
    font-size: 60px;
}

.creative-box-hover .coloured-btn {
    margin-top: 30px
}

.light .creative-box-overlay {
    background: rgba(254, 254, 254, 0.95)
}

.light .creative-box-hover h5 {
    color: #444444
}

.light .creative-box-hover>p {
    color: #555555
}

.container .creative-box-hover h5 {
    font-size: 16px
}

.container .creative-box-hover>p {
    font-size: 13px
}

.creative-boxes.light>div:nth-child(2n+2) .creative-box-overlay {
    background: rgba(245, 245, 245, 0.95)
}


/*=============== Sponsors Carousel ===================*/

.sponsors-carousel {
    float: left;
    padding: 40px;
    position: relative;
    width: 100%;
}

.sponsors-carousel.overlap {
    margin: -65px 0
}

.sponsor-logo {
    float: left;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}

.sponsor-logo>a {
    float: left;
    width: 100%;
}

.sponsor-logo img {
    display: inline-block !important;
    max-width: 100%;
}

.sponsors-carousel::before,
.sponsors-carousel::after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: -30px;
    position: absolute;
    top: 0;
    width: 30px;
}

.sponsors-carousel::after {
    left: auto;
    right: -30px;
}

.sponsors-carousel .owl-nav {
    height: 0;
    left: 0;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    width: 100%;
}

.sponsors-carousel .owl-nav>div {
    color: rgba(0, 0, 0, 0);
    float: left;
    height: 30px;
    margin-top: -15px;
    position: relative;
    width: 30px;
}

.sponsors-carousel .owl-nav>div.owl-next {
    float: right
}

.sponsors-carousel .owl-nav>div:before {
    color: #333333;
    content: "\f104";
    font-family: fontawesome;
    font-size: 30px;
    height: 100%;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.sponsors-carousel .owl-nav>div.owl-next:before {
    content: "\f105"
}


/*=============== Posts Carousel ===================*/

.posts-carousel {
    float: left;
    width: 100%;
}

.fancy-post {
    float: left;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

.fancy-post:before,
.fancy-post:after {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.87) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#de000000', GradientType=0);
    bottom: 0;
    content: "";
    height: 50%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.fancy-post:hover:before {
    height: 100%;
    opacity: 0;
}

.fancy-post:after {
    background: black;
    opacity: 0;
    z-index: 0;
    height: 100%;
}

.fancy-post:hover:after {
    opacity: 0.7
}

.fancy-post>span {
    color: #fff;
    font-size: 25px;
    height: 50px;
    line-height: 48px;
    text-align: center;
    width: 50px;
    z-index: 1;
    position: absolute;
    left: 20px;
    top: 0;
    -webkit-transition: all 0.3s ease 0.2s, font-size 0.2s linear;
    -moz-transition: all 0.3s ease 0.2s, font-size 0.2s linear;
    -ms-transition: all 0.3s ease 0.2s, font-size 0.2s linear;
    -o-transition: all 0.3s ease 0.2s, font-size 0.2s linear;
    transition: all 0.3s ease 0.2s, font-size 0.2s linear;
}

.fancy-post:hover>span {
    font-size: 56px;
    height: 56px;
    left: 0;
    margin-top: -56px;
    top: 50%;
    width: 100%;
}

.fancy-post>span strong {
    color: #fff;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 600;
    left: 0;
    letter-spacing: 0.3px;
    line-height: 25px;
    padding: 20px 50px 0;
    min-width: 200px;
    position: absolute;
    top: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    -o-transform: translateY(-150px);
    transform: translateY(-150px);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.fancy-post>span a {
    color: inherit
}

.fancy-post>span strong a {
    color: inherit
}

.fancy-post:hover>span strong {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1);
    /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /* easeOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /* easeOutBack */
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
    transition-delay: 0.5s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.fancy-post>span i:after {
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    width: 100%;
    opacity: 0.7;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -ms-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.fancy-post:hover>span i:after {
    height: 0;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.fancy-post>span:before,
.fancy-post>span:after {
    border-bottom: 15px solid transparent;
    border-left: 25px solid black;
    content: "";
    height: 0;
    width: 0;
    opacity: 0.7;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -ms-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.fancy-post>span:after {
    border-left: 0 none;
    border-right: 25px solid black;
    left: auto;
    right: 0;
}

.fancy-post:hover>span:before,
.fancy-post:hover>span:after {
    border-bottom: 0;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

.fancy-post>img {
    width: 100%;
    z-index: -1;
}

.fancy-post:hover>img {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

.fancy-post-intro {
    padding: 30px 40px;
    width: 100%;
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
}

.author {
    display: table
}

.author img {
    margin-right: 10px;
    vertical-align: top;
    display: inline-block!important;
}

.author>i {
    color: #fff;
    font-family: roboto;
    font-size: 13px;
}

.fancy-post-intro>h4 {
    color: #fff;
    float: left;
    font-size: 15px;
    letter-spacing: 0.4px;
    line-height: 25px;
    margin: 1px 0 0;
    width: 100%;
}

.fancy-post-intro>h4 a {
    color: inherit
}

.fancy-post:hover .fancy-post-intro {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
    visibility: hidden;
}


/*=============== Simple Services ===================*/

.simple-services {
    float: left;
    width: 100%;
    overflow: hidden;
}

.simple-service {
    background: black none repeat scroll 0 0;
    float: left;
    padding: 55px 40px;
    width: 100%;
}

.simple-service-wrap {
    float: left;
    position: relative;
    width: 100%;
}

.simple-services>div {
    padding: 0!important
}

.simple-service-wrap>img,
.simple-service-wrap>i {
    color: #FFF;
    font-size: 55px;
    position: absolute;
    right: -10px;
    top: 0;
}

.simple-service-wrap>span {
    color: #fff;
    float: left;
    font-family: roboto;
    font-size: 30px;
    font-weight: 300;
    line-height: 30px;
    margin-bottom: 12px;
    width: 100%;
}

.simple-service-wrap>span i {
    font-style: normal
}

.simple-service-wrap>h5 {
    color: #fff;
    float: left;
    font-size: 15px;
    margin: 0 0 8px;
    width: 100%;
}

.simple-service-wrap>p {
    color: #383839;
    float: left;
    font-family: roboto;
    margin: 0;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    width: 100%;
}

.color1 {
    background: #eb77a6
}

.color2 {
    background: #caa3be
}

.color3 {
    background: #9daec8
}

.color4 {
    background: #85bcef
}

.color5 {
    background: #fdde3d
}

.color6 {
    background: #77caa1
}

.color7 {
    background: #3c88b4
}

.simple-service:hover .simple-service-wrap>img,
.simple-service:hover .simple-service-wrap>i {
    -webkit-animation: 1s ease 0s normal none 1 running focus;
    -moz-animation: 1s ease 0s normal none 1 running focus;
    -ms-animation: 1s ease 0s normal none 1 running focus;
    -o-animation: 1s ease 0s normal none 1 running focus;
    animation: 1s ease 0s normal none 1 running focus;
}

@-webkit-keyframes focus {
    50% {
        -webkit-transform: scale(1.3) rotate(20deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0)
    }
}

@-moz-keyframes focus {
    50% {
        -moz-transform: scale(1.3) rotate(20deg)
    }
    100% {
        -moz-transform: scale(1) rotate(0)
    }
}

@-ms-keyframes focus {
    50% {
        -ms-transform: scale(1.3) rotate(20deg)
    }
    100% {
        -ms-transform: scale(1) rotate(0)
    }
}

@keyframes focus {
    50% {
        transform: scale(1.3) rotate(20deg)
    }
    100% {
        transform: scale(1) rotate(0)
    }
}


/*=============== Big Tabs ===================*/

.big-tabs {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.big-tabs-carousel {
    float: left;
    width: 100%;
}

.big-tabs-nav {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 33.375%;
    z-index: 1;
    -webkit-box-shadow: 4px 0 7px #363636;
    -moz-box-shadow: 4px 0 7px #363636;
    -ms-box-shadow: 4px 0 7px #363636;
    -o-box-shadow: 4px 0 7px #363636;
    box-shadow: 4px 0 7px #363636;
}

.big-tabs-nav:before {
    background: #282828;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.85;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.big-tabs-nav>img {
    width: 100%
}

.big-tabs-nav-center {
    height: 100%;
    width: 100%;
    text-align: right;
    position: absolute;
    left: 0;
    top: 0;
}

.big-tabs-nav-center:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.big-tabs-nav-inner {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 65%;
}

.big-tab-btn {
    float: left;
    padding: 40px 25px;
    text-align: right;
    width: 100%;
    position: relative;
    z-index: 1;
}

.big-tab-btn:before {
    background: #212121;
    content: "";
    height: 100%;
    width: 0;
    z-index: -1;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.big-tab-btn:after {
    background: black none repeat scroll 0 0;
    content: "";
    height: 0;
    width: 7px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.3s ease-in-out 0.2s;
    -moz-transition: all 0.3s ease-in-out 0.2s;
    -ms-transition: all 0.3s ease-in-out 0.2s;
    -o-transition: all 0.3s ease-in-out 0.2s;
    transition: all 0.3s ease-in-out 0.2s;
}

.big-tab-btn.active:before {
    width: 100%;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out 0.2s;
    -moz-transition: all 0.3s ease-in-out 0.2s;
    -ms-transition: all 0.3s ease-in-out 0.2s;
    -o-transition: all 0.3s ease-in-out 0.2s;
    transition: all 0.3s ease-in-out 0.2s;
}

.big-tab-btn.active:after {
    height: 100%;
    opacity: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.big-tab-btn i {
    display: table-cell;
    font-size: 40px;
    vertical-align: top;
}

.btn-text {
    display: table-cell;
    padding-left: 20px;
    text-align: left;
    width: 100%;
}

.btn-text>strong {
    color: #fff;
    display: block;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.btn-text>span {
    color: #cfcfcf;
    float: left;
    font-size: 11px;
    letter-spacing: 0.5px;
    width: 100%;
    text-transform: uppercase;
}

.big-tab-content {
    display: inline-block;
    vertical-align: middle;
    margin-left: -5px;
    width: 66.625%;
}

.big-tab-content-slide {
    float: left;
    padding: 40px 60px;
    width: 100%;
}

.appointment-tab {
    float: left;
    width: 100%;
}

.appointment-details {
    float: left;
    width: 100%;
}

.appointment-details>span {
    color: #f7f7f7;
    float: left;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 15px;
    margin-bottom: 5px;
    width: 100%;
}

.appointment-details>h4 {
    color: #fff;
    float: left;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 35px;
    margin: 0 0 15px;
    text-transform: uppercase;
    width: 100%;
}

.appointment-details>p {
    color: #f7f7f7;
    float: left;
    font-size: 14px;
    margin: 0 0 30px;
    width: 100%;
}

.subtitle {
    color: #fff;
    float: left;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 0 20px;
    width: 100%;
}

.subtitle i {
    font-style: normal
}

.appointment-details .timing>i {
    color: #dadada;
    padding-left: 40px;
    text-align: left;
}

.appointment-tab .appointment-form:before {
    background: none
}

.appointment-tab .appointment-form {
    padding: 0
}

.big-tab-content .medical-services .med-service>h4 {
    font-size: 14px
}

.information {
    float: left;
    width: 100%;
}

.information>span {
    color: #ededed;
    float: left;
    font-family: roboto;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    width: 100%;
}

.information>h4 {
    color: #fff;
    float: left;
    font-size: 40px;
    margin: 0;
    width: 100%;
}

.big-tab-content-slide .information>h4 {
    font-size: 36px
}

.information>p {
    color: #ededed;
    float: left;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 26px;
    margin: 20px 0 30px;
    width: 100%;
}

.information .list {
    margin-bottom: 40px
}

.information .list li a {
    color: #ededed
}

.information .list li:before {
    color: #ededed
}

.big-tabs-carousel .owl-item {
    opacity: 0
}

.big-tabs-carousel .owl-item.active {
    opacity: 1
}

.information.dark>span {
    color: #8b8b8b
}

.information.dark>h4 {
    color: #2d2d2d
}

.information strong {
    float: left;
    font-family: roboto slab;
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
    margin-top: 5px;
    text-transform: uppercase;
    width: 100%;
}

.information.dark>p {
    color: #454545
}


/*=============== Recent News ===================*/

.side-title {
    float: left;
    margin-bottom: 40px;
    width: 100%;
}

.side-title>span {
    float: left;
    font-family: roboto slab;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    width: 100%;
}

.side-title>h2 {
    color: #2d2d2d;
    float: left;
    font-size: 26px;
    font-weight: 800;
    margin: 5px 0 10px;
    width: 100%;
}

.side-title>i {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.4px;
    width: 100%;
}


/*=============== Toggle ===================*/

.toggle {
    float: left;
    margin-bottom: -10px;
    width: 100%;
}

.toggle-item {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.toggle-item h3 {
    background: #fafafb;
    color: #444444;
    cursor: pointer;
    display: table;
    float: left;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    padding-right: 40px;
}

.toggle-item h3 i {
    border-right: 2px solid #fff;
    display: table-cell;
    font-size: 15px;
    line-height: 56px;
    text-align: center;
    width: 56px;
}

.gray .toggle-item h3 {
    background: #FFF
}

.gray .toggle-item h3 i {
    border-color: #fafafb
}

.toggle-item h3 span {
    display: table-cell;
    line-height: 25px;
    padding: 15px 20px;
}

.toggle-item h3:before {
    background: #fafafb;
    color: #333;
    content: "\f106";
    font-family: fontawesome;
    line-height: 21px;
    text-align: center;
    height: 21px;
    width: 21px;
    position: absolute;
    right: 10px;
    top: 17px;
}

.toggle-item h3.active:before {
    content: "\f107";
    color: #ffffff;
}

.content {
    float: left;
    width: 100%;
}

.content img {
    max-width: 100%
}


/*=============== Sponsors ===================*/

.sponsors {
    float: left;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sponsors>li {
    float: left;
    padding: 0 20px;
    width: 20%;
}

.sponsors li:first-child:nth-last-child(1),
.sponsors li:first-child:nth-last-child(1)~li {
    width: 100%;
}

.sponsors li:first-child:nth-last-child(2),
.sponsors li:first-child:nth-last-child(2)~li {
    width: 50%;
}

.sponsors li:first-child:nth-last-child(3),
.sponsors li:first-child:nth-last-child(3)~li {
    width: 33.334%;
}

.sponsors li:first-child:nth-last-child(4),
.sponsors li:first-child:nth-last-child(4)~li {
    width: 25%;
}

.sponsors li:first-child:nth-last-child(5),
.sponsors li:first-child:nth-last-child(5)~li {
    width: 20%;
}

.sponsors li:first-child:nth-last-child(6),
.sponsors li:first-child:nth-last-child(6)~li {
    width: 16.666%;
}

.sponsors a img {
    max-width: 100%
}

.sponsors>li:hover img {
    -webkit-animation: 1s ease 0s normal none 1 running jello;
    -moz-animation: 1s ease 0s normal none 1 running jello;
    -ms-animation: 1s ease 0s normal none 1 running jello;
    -o-animation: 1s ease 0s normal none 1 running jello;
    animation: 1s ease 0s normal none 1 running jello;
}


/*=============== Why Choose Us ===================*/

.traditional-title {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

.traditional-title>span {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 16px;
    margin-bottom: 4px;
    width: 100%;
}

.traditional-title>h2,
.traditional-title>h3 {
    color: #2d2d2d;
    float: left;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}

.traditional-title>h2 i,
.traditional-title>h3 i {
    font-style: normal
}

.traditional-title>h3 {
    font-size: 26px
}

.traditional-title>p {
    float: left;
    margin: 10px 0 0;
    width: 100%;
}

.choose-box {
    display: table;
    padding: 10px 0;
    position: relative;
    z-index: 1;
    width: 100%;
}

.choose-box:hover {
    padding-left: 20px
}

.choose-box:before {
    background: #f3f3f3;
    content: "";
    height: 100%;
    width: 0;
    z-index: -1;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.choose-box:hover:before {
    width: 90%;
    opacity: 1;
}

.why-choose {
    float: left;
    width: 100%;
}

.choose-box>span {
    display: table-cell;
    max-width: 86px;
    vertical-align: top;
}

.choose-box>span i {
    background: #f3f3f3;
    color: #8e8e8e;
    float: left;
    font-size: 35px;
    height: 76px;
    line-height: 76px;
    text-align: center;
    width: 76px;
}

.choose-box:hover>span i {
    color: #FFF
}

.choose-inner {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
}

.choose-inner>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 5px;
    text-transform: uppercase;
    width: 100%;
}

.choose-inner>h4 a {
    color: inherit
}

.choose-inner>span {
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    width: 100%;
}


/*=============== Information Form ===================*/

.special-title {
    float: left;
    width: 100%;
}

.special-title>h2 {
    float: left;
    font-size: 26px;
    line-height: 25px;
    margin: 0 0 5px;
    width: 100%;
}

.special-title>span {
    color: #fff;
    float: left;
    font-family: roboto;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    width: 100%;
}

.form {
    float: left;
    margin-bottom: -5px;
    width: 100%;
}

.form .row {
    margin: 0 -5px
}

.form .row>div {
    padding: 0 5px
}

form.form .input-field input {
    height: 50px
}

form.form button {
    margin-top: 0;
    padding: 16px 20px;
    font-size: 12px;
    font-weight: 300;
    background: #333;
    border: 1px solid transparent;
}


/*=============== Projects List ===================*/

.projects-list {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

.projects-list>li {
    display: inline-block;
    margin: 0 -2.5px -6px;
    width: 20%;
}

.project {
    float: left;
    position: relative;
    width: 100%;
}

.project img {
    width: 100%
}

.project-hover {
    left: 0;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.project:before {
    content: "";
    opacity: 0.82;
    height: 0;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 50%;
}

.project:hover:before {
    top: 0;
    height: 100%;
}

.project-hover>a {
    background: rgba(0, 0, 0, 0.37) none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 45px;
    line-height: 45px;
    margin: 10px 0;
    text-align: center;
    width: 45px;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}

.project-hover>h4,
.project-hover>a {
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
}

.project-hover>h4 {
    color: #fff;
    float: left;
    font-size: 15px;
    letter-spacing: 0.3px;
    line-height: 23px;
    margin: 10px 0;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
}

.project:hover .project-hover>a,
.project:hover .project-hover>h4 {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.projects-list>li:first-child:nth-last-child(1),
.projects-list>li:first-child:nth-last-child(1)~li {
    width: 100%
}

.projects-list>li:first-child:nth-last-child(2),
.projects-list>li:first-child:nth-last-child(2)~li {
    width: 50%
}

.projects-list>li:first-child:nth-last-child(3),
.projects-list>li:first-child:nth-last-child(3)~li {
    width: 33.334%
}

.projects-list>li:first-child:nth-last-child(4),
.projects-list>li:first-child:nth-last-child(4)~li {
    width: 25%
}

.projects-list>li:first-child:nth-last-child(5),
.projects-list>li:first-child:nth-last-child(5)~li {
    width: 20%
}

.view-all {
    float: left;
    padding: 30px 30px 0;
    text-align: center;
    width: 100%;
}


/*=============== All Products ===================*/

.all-products {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}

.product {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.all-products .row {
    margin: 0 -1.5px
}

.all-products .row>div {
    padding: 0 1.5px
}

.product-img {
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.product-img img {
    width: 100%
}

.product-hover {
    padding: 20px;
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.product-img:before {
    background: #000;
    content: "";
    height: 100%;
    width: 40%;
    opacity: 0;
    z-index: 1;
    position: absolute;
    left: 30%;
    top: 0;
}

.product-img:hover:before {
    opacity: 0.7;
    width: 100%;
    left: 0;
}

.product-hover>a {
    background: #fff none repeat scroll 0 0;
    color: #929292;
    display: inline-block;
    font-size: 15px;
    height: 35px;
    line-height: 35px;
    position: relative;
    margin: 0 2px;
    width: 35px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.product-hover>a:hover {
    color: #FFF
}

.product-img:hover .product-hover>a {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: left 0.3s ease 0.4s, transform 0.3s ease 0.2s;
    -moz-transition: left 0.3s ease 0.4s, transform 0.3s ease 0.2s;
    -ms-transition: left 0.3s ease 0.4s, transform 0.3s ease 0.2s;
    -o-transition: left 0.3s ease 0.4s, transform 0.3s ease 0.2s;
    transition: left 0.3s ease 0.4s, transform 0.3s ease 0.2s;
}

.product-hover>span {
    float: left;
    line-height: 15px;
    margin-top: 15px;
    width: 100%;
    opacity: 0;
    -webkit-transform: skewX(80deg);
    -moz-transform: skewX(80deg);
    -ms-transform: skewX(80deg);
    -o-transform: skewX(80deg);
    transform: skewX(80deg);
}

.product-img:hover .product-hover>span {
    opacity: 1;
    -webkit-transform: skewX(0);
    -moz-transform: skewX(0);
    -ms-transform: skewX(0);
    -o-transform: skewX(0);
    transform: skewX(0);
    -webkit-transition: all 0.3s ease 0.5s;
    -moz-transition: all 0.3s ease 0.5s;
    -ms-transition: all 0.3s ease 0.5s;
    -o-transition: all 0.3s ease 0.5s;
    transition: all 0.3s ease 0.5s;
}

.product-hover>span .rating-symbol {
    color: #fff;
    font-size: 5px;
}

.fa-3x {
    padding: 0 2px
}

.product-name {
    float: left;
    padding: 0 10px;
    text-align: center;
    width: 100%;
}

.cats {
    float: left;
    width: 100%;
}

.cats>a {
    color: #9a9a9a;
    display: inline-block;
    font-family: arimo;
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 15px;
    margin: 0 1px;
}

.product-name>h4 {
    color: #303030;
    float: left;
    font-size: 14px;
    margin: 15px 0;
    width: 100%;
    text-transform: uppercase;
}

.product-name>h4 a {
    color: inherit
}

.product-name>span {
    float: left;
    font-family: roboto;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    width: 100%;
}

.product-name>span ins {
    text-decoration: none
}

.product-name>span del {
    color: #797979;
    font-size: 12px;
    font-weight: 300;
    padding-left: 5px;
}

.product-hover>a.product-cart {
    left: -44px
}

.product-img:hover .product-hover>a.product-cart,
.product-img:hover .product-hover>a.product-search {
    left: 0;
}

.product-hover>a.product-search {
    left: 44px
}

.loading {
    pointer-events: none
}

.loading i:before {
    -webkit-animation: 1.3s linear 0s normal none infinite running spin;
    -moz-animation: 1.3s linear 0s normal none infinite running spin;
    -ms-animation: 1.3s linear 0s normal none infinite running spin;
    -o-animation: 1.3s linear 0s normal none infinite running spin;
    animation: 1.3s linear 0s normal none infinite running spin;
    display: inline-block;
    content: "\f110";
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.product-hover>a.product-cart span {
    background: red;
    color: #fff;
    content: "1";
    font-family: roboto;
    font-size: 11px;
    height: 15px;
    letter-spacing: 0;
    line-height: 17px;
    opacity: 0;
    padding: 0 5px;
    position: absolute;
    right: -4px;
    top: 0;
    -webkit-transition: all 0.3s 3s;
    -moz-transition: all 0.3s 3s;
    -ms-transition: all 0.3s 3s;
    -o-transition: all 0.3s 3s;
    transition: all 0.3s 3s;
}

.product-hover>a.product-cart.added span {
    top: -6px;
    opacity: 1;
}

.product-hover>a.product-wishlist.added-to-wishlist {
    color: #FFF
}

.product-hover>a.view-cart {
    margin-right: 5px
}


/*=============== History Chart ===================*/

.history-chart {
    float: left;
    width: 100%;
}

.history-text {
    background: transparent url("../images/arkaplan.jpg") no-repeat scroll 0 0 / cover;
    display: table-cell;
    padding: 50px 150px 50px 100px;
    position: relative;
    vertical-align: middle;
    width: 50%;
    z-index: 1;
}

.history-text::before {
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.history-text>span {
    float: left;
    font-family: roboto slab;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    width: 100%;
}

.history-text>h4 {
    color: #fff;
    float: left;
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
    width: 100%;
}

.history-text>h4 strong {
    font-weight: 800
}

.history-text>i {
    color: #c7c7c7;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    width: 100%;
}

.history-text>p {
    color: #fff;
    float: left;
    margin: 10px 0 40px;
    width: 100%;
}

.history-table {
    display: table-cell;
    vertical-align: middle;
    padding: 100px 80px;
    width: 50%;
}

.table-info {
    float: left;
    width: 100%;
    margin-top: 40px;
    margin-bottom: -20px;
}

.table-define {
    float: left;
    width: 100%;
}

.table-define>span {
    color: #444444;
    float: left;
    font-family: arimo;
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 15px;
    margin-bottom: 10px;
    width: 100%;
}

.table-define>span i {
    float: left;
    height: 15px;
    margin-right: 5px;
    width: 15px;
}

.counter {
    float: left;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.counter>strong {
    color: #2d2d2d;
    float: left;
    font-family: roboto slab;
    font-size: 30px;
    font-weight: 800;
    line-height: 24px;
    margin-bottom: 5px;
    width: 100%;
}

.counter>i {
    color: #454545;
    float: left;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.3px;
    width: 100%;
}


/*=============== Page Top ===================*/

.pagetop {
    background: transparent url("../images/pagetop.jpg") no-repeat scroll 0 0 / cover;
    float: left;
    padding: 70px 0;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.pagetop:before {
    background: rgba(4, 7, 32, 0.8);
    content: "";
    height: 100%;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.pagetop .container>span {
    color: #e7e7e7;
    float: left;
    font-family: roboto slab;
    font-size: 13px;
    padding: 0 260px;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
}

.pagetop h1 {
    color: #fff;
    float: left;
    font-size: 30px;
    margin: 5px 0 0;
    padding: 0 260px;
    text-transform: uppercase;
    width: 100%;
}

.pagetop .container {
    position: relative
}

.pagetop ul {
    list-style: outside none none;
    margin: 0;
    max-width: 265px;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.pagetop ul li {
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 10px;
    position: relative;
}

.pagetop ul li a {
    color: inherit;
    display: inline-block;
    line-height: inherit;
}

.pagetop ul li::before {
    content: "/";
    position: absolute;
    right: -2px;
    top: 0;
}

.pagetop ul li:last-child:before {
    display: none
}


/*=============== Pagination ===================*/

.pagination.theme-pagi {
    float: left;
    margin: 70px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

.pagination.theme-pagi li {
    border-radius: 0;
    color: #282828;
    font-family: arimo;
    font-size: 12px;
    margin: 0 -2.6px;
    padding: 0;
    text-transform: uppercase;
    vertical-align: unset;
}

.pagination.theme-pagi li a,
.pagination.theme-pagi li span {
    background: #f6f6f6;
    border: 1px solid #d3d3d3;
    float: left;
    line-height: 20px;
    padding: 10px 15px;
    position: relative;
    color: #282828;
    z-index: 1;
}

.pagination.theme-pagi li span {
    background: none;
    border: 0 none;
    font-size: 20px;
}

.pagination.theme-pagi li:nth-child(2n+2) a {
    background: #fdfdfd
}

.pagination.theme-pagi li a:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,ffffff+100&1+0,0+100 */
    background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(234, 234, 234, 1) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#00ffffff', GradientType=0);
    /* IE6-9 */
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0.2;
    z-index: -1;
}

.pagination.theme-pagi li:first-child a,
.pagination.theme-pagi li:last-child a {
    background: #10222d none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-family: arimo;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 11px 30px;
}

.pagination.theme-pagi li:first-child a {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

.pagination.theme-pagi li:last-child a {
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}


/*=============== Surgeons ===================*/

.all-surgeons {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}

.surgeon {
    float: left;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.surgeon img {
    width: 100%
}

.surgeon:hover img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.surgeon-info {
    padding: 0 10px 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

.surgeon-name {
    float: left;
    padding: 20px 35px 25px;
    position: relative;
    width: 100%;
    z-index: 1;
    -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
}

.surgeon:hover .surgeon-info .surgeon-name {
    -webkit-transform: translateX(200%);
    -moz-transform: translateX(200%);
    -ms-transform: translateX(200%);
    -o-transform: translateX(200%);
    transform: translateX(200%);
}

.surgeon-name h3 {
    color: #fff;
    float: left;
    font-size: 15px;
    text-transform: uppercase;
    margin: 0 0 5px;
    width: 100%;
}

.surgeon-name h3 a {
    color: inherit
}

.surgeon-name>span {
    color: #fff;
    float: left;
    font-family: roboto;
    font-size: 11px;
    width: 100%;
}

.surgeon-name:before {
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    opacity: 0.8;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
}

.surgeon:hover .surgeon-name:before {
    -webkit-transform: translateX(-400%);
    -moz-transform: translateX(-400%);
    -ms-transform: translateX(-400%);
    -o-transform: translateX(-400%);
    transform: translateX(-400%);
}

.surgeon-name:after {
    border-left: 260px solid #000;
    border-top: 30px solid transparent;
    bottom: 100%;
    content: "";
    height: 0;
    left: 0;
    opacity: 0.8;
    position: absolute;
    width: 0;
    -webkit-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition: all 500ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
    -webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    -o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
    /* easeInOutSine */
}

.surgeon:hover .surgeon-name:after {
    -webkit-transform: translateX(-400%);
    -moz-transform: translateX(-400%);
    -ms-transform: translateX(-400%);
    -o-transform: translateX(-400%);
    transform: translateX(-400%);
}


/*=============== Contact Page ===================*/

.map {
    float: left;
    width: 100%;
}

.map>div {
    float: left;
    min-height: 560px;
    width: 100%;
}

.contact-details {
    float: left;
    width: 100%;
}

.contact-details>span {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    margin-bottom: 10px;
    width: 100%;
}

.contact-details>h4 {
    float: left;
    font-size: 33px;
    line-height: 30px;
    margin: 0 0 10px;
    width: 100%;
}

.contact-details>strong {
    float: left;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: 800;
    line-height: 20px;
    margin-bottom: 10px;
    width: 100%;
}

.contact-details>p {
    color: #454545;
    float: left;
    font-size: 13px;
    width: 100%;
}

.contact-details>p strong {
    font-weight: 900
}

.contact-details>i {
    float: left;
    font-style: normal;
    font-weight: 700;
    width: 100%;
}

.contact-boxes {
    float: left;
    margin-bottom: -2px;
    position: relative;
    width: 100%;
}

.contact-box {
    background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0;
    float: left;
    padding: 70px 40px 80px;
    position: relative;
    text-align: center;
    width: 100%;
}

.contact-boxes .row {
    margin: 0 -1px
}

.contact-boxes .row>div {
    padding: 0 1px
}

.contact-box:before {
    background: #FFF;
    content: "";
    height: 100%;
    width: 2px;
    position: absolute;
    left: 100%;
    top: 0;
}

.contact-box>span {
    color: #fff;
    display: inline-block;
    font-size: 22px;
    height: 86px;
    line-height: 86px;
    width: 86px;
}

.contact-box>strong {
    color: #fff;
    float: left;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    margin: 25px 0 10px;
    width: 100%;
}

.contact-box>p {
    color: #cacaca;
    float: left;
    font-size: 13px;
    margin: 0;
    width: 100%;
}

.contact-box>p strong {
    float: left;
    font-weight: 900;
    width: 100%;
}

.contact-box>p span {
    color: #cbcbcb;
    display: table;
    text-decoration: underline;
    width: 100%;
}

.contact-form .input-field>input {
    height: 53px
}

.contact-form .input-field>input,
.contact-form .input-field>textarea {
    color: #555555;
    font-family: roboto;
    font-size: 11px;
}

.contact-form {
    text-align: center
}

.contact-form .coloured-btn {
    display: inline-block;
    float: none;
}

.contact-form form .row {
    margin: 0 -1px
}

.g-recaptcha {
    float: left;
    margin-top: 10px;
    text-align: center;
    width: 100%;
}

.g-recaptcha>div {
    display: inline-block;
    width: auto;
}

#formresult {
    float: left;
    text-align: left;
    width: 100%;
}

.alert {
    border: 1px solid #fff;
    float: left;
    font-family: roboto slab;
    font-size: 12px;
    margin-bottom: 10px;
    padding: 13px 20px;
    width: 100%;
}

.alert.warning {
    background: #f2dede none repeat scroll 0 0;
    border-color: #ebccd1;
    color: #a94442;
}

.alert.success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}


/*=============== Service Single ===================*/

.service-single {
    float: left;
    margin-bottom: 60px;
    width: 100%;
}

.single-img {
    float: left;
    margin-bottom: 60px;
    position: relative;
    text-align: center;
    width: 100%;
}

.single-img>img {
    max-width: 100%
}

.service-description {
    float: left;
    width: 100%;
}

.service-icon {
    float: left;
    font-size: 60px;
    position: relative;
    width: 120px;
}

.service-icon:before {
    border-top: 4px double #000000;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    width: 80%;
}

.service-description {
    float: left;
    width: 100%;
}

.service-icon {
    float: left;
    font-size: 60px;
    position: relative;
    width: 120px;
}

.service-icon:before {
    border-top: 4px double #000000;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    width: 80%;
}

.service-title>span {
    color: #8b8b8b;
    display: table;
    font-family: roboto;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.service-title h2 {
    color: #2d2d2d;
    font-size: 26px;
    font-weight: 800;
    margin: 10px 0 15px;
    text-transform: uppercase;
}

.service-description>p {
    color: #454545;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 28px;
    padding-left: 120px;
}

.service-title {
    display: table;
    left: -30px;
    position: relative;
}


/*=============== Real Stories Page ===================*/

.stories {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}

.stories .fancy-post {
    margin-bottom: 30px
}

.stories.no-gap {
    margin: 0
}

.stories.no-gap .row>div {
    padding: 0
}

.stories.no-gap .fancy-post {
    margin-bottom: 0
}


/*=============== Single Product Page ===================*/

.single-product {
    float: left;
    width: 100%;
}

.single-product-tabs {
    float: left;
    width: 100%;
}

.single-product-img {
    float: left;
    width: 100%;
}

.single-product-img img {
    max-width: 100%
}

.single-product-thumbs {
    float: left;
    padding: 0 40px;
    position: relative;
    width: 100%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.single-product-thumbs a {
    border: 3px solid #ffffff;
    float: left;
    width: 100%;
}

.single-product-thumbs a img {
    width: 100%
}

.single-product-detail {
    float: left;
    margin-top: 10px;
    width: 100%;
}

.single-product-detail .cats>a {
    font-size: 12px
}

.single-product-detail h2 {
    float: left;
    font-size: 26px;
    font-weight: 600;
    margin: 5px 0 20px;
    text-transform: uppercase;
    width: 100%;
}

.single-product-detail .fa-3x {
    color: #dcc025;
    font-size: 15px;
}

.single-product-detail>span.reviews-counter {
    color: #9a9a9a;
    font-size: 11px;
    margin-left: 10px;
}

.single-price {
    float: left;
    line-height: 20px;
    margin-bottom: 40px;
    margin-top: 30px;
    width: 100%;
}

.single-price ins {
    float: left;
    font-family: roboto;
    font-size: 22px;
    font-weight: 700;
    margin-right: 10px;
    text-decoration: none;
}

.single-price del {
    color: #797979;
    float: left;
    font-family: roboto;
    font-size: 18px;
}

.single-product-detail .list>li {
    color: #666666;
    font-family: arimo;
    line-height: 28px;
    font-size: 13px;
    font-weight: 200;
}

.product-selections {
    float: left;
    margin-top: 40px;
    width: 100%;
}

.input-group {
    background: #f4f4f4 none repeat scroll 0 0;
    display: inline-block;
    position: relative;
    width: 100px;
    z-index: 1;
}

.input-group span {
    height: 18px;
    line-height: 16px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 7px;
    width: 16px;
}

.input-group input {
    border: 0 none;
    box-sizing: border-box;
    font-family: arimo;
    font-size: 13px;
    margin: 0;
    padding-right: 30px;
}

.input-group span button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0);
    float: none;
    height: 100%;
    padding: 0;
    width: 100%;
}

.input-group span:last-child {
    bottom: 7px;
    top: auto;
}

.input-group:before {
    background: rgb(249, 252, 247);
    background: -moz-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
    background: linear-gradient(to bottom, rgba(249, 252, 247, 1) 0%, rgba(245, 249, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0', GradientType=0);
    border: 1px solid #eaeaea;
    content: "";
    height: 70%;
    position: absolute;
    right: 8px;
    top: 15%;
    width: 20px;
    z-index: -1;
}

.input-group span button:before {
    color: #333333;
    content: "\f0d8";
    font-family: fontawesome;
    font-size: 12px;
    height: 100%;
    left: 0;
    line-height: 18px;
    position: absolute;
    top: 0;
    width: 100%;
}

.input-group span:last-child button:before {
    content: "\f0d7"
}

.input-group span:hover button:before {
    color: #FFF
}

.product-selections .coloured-btn {
    margin-left: 20px;
    padding: 13px 20px;
}

.product-selections .coloured-btn:hover {
    border-color: inherit;
    padding: 13px 30px;
}

.add-to-wishlist {
    border: 1px solid #d2d2d2;
    color: #555555;
    display: inline-block;
    font-family: roboto slab;
    font-size: 11px;
    font-weight: 600;
    line-height: 23px;
    margin-left: 12px;
    padding: 10px 20px;
    letter-spacing: 0.1px;
}

.add-to-wishlist i {
    color: #9b9b9b
}


/*=============== Story Detail ===================*/

.single-story {
    float: left;
    margin-bottom: 70px;
    width: 100%;
}

.single-img>a {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.single-img>a i {
    color: #ffffff;
    font-size: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.story-detail {
    float: left;
    width: 100%;
}

.post-subtitle {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    width: 100%;
}

.post-title {
    float: left;
    font-size: 26px;
    margin: 10px 0 30px;
    width: 100%;
}

.meta {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.meta>li {
    color: #6f6f6f;
    display: inline-block;
    font-family: roboto;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    margin-right: 40px;
}

.meta>li img {
    margin-right: 10px
}

.meta>li a {
    color: inherit
}

.meta>li i {
    margin-right: 5px
}

.single-description {
    float: left;
    margin-top: 10px;
    padding-left: 120px;
    position: relative;
    width: 100%;
}

.single-description:before {
    border-top: 4px double #000000;
    content: "";
    left: 0;
    position: absolute;
    top: 25px;
    width: 90px;
}

.single-description p {
    font-size: 14px;
    line-height: 28px;
}


/*=============== Staff Detail ===================*/

.staff-detail {
    float: left;
    width: 100%;
}

.member-introduction {
    float: left;
    padding: 0 100px;
    width: 100%;
}

.member-wrapper {
    background: #fafafa;
    float: left;
    padding: 50px;
    width: 100%;
}

.staff-img {
    display: table-cell;
    vertical-align: middle;
}

.member-detail {
    display: table-cell;
    padding-left: 50px;
    vertical-align: middle;
}

.member-detail>i {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.3px;
    width: 100%;
}

.member-detail h2 {
    float: left;
    font-size: 33px;
    font-weight: 100;
    margin: 10px 0;
    width: 100%;
}

.member-detail h2 strong {
    font-weight: 900
}

.member-detail>span {
    float: left;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    width: 100%;
}

.info-list {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.info-list>li {
    color: #454545;
    float: left;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 12px;
    width: 100%;
}

.info-list>li strong {
    float: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 40%;
}

.info-list>li strong i {
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    padding: 8px 20px;
    text-transform: capitalize;
}

.member-detail .social-icons {
    margin-top: 40px
}

.staff-tabs {
    float: left;
    width: 100%;
}

.staff-tabs-selectors {
    float: left;
    position: relative;
    padding: 0 60px;
    width: 100%;
}

.tabs {
    padding: 0
}

.staff-tabs-selectors .tab {
    height: auto;
    line-height: 30px;
}

.staff-tabs-selectors .tabs {
    height: auto;
    background: none;
}

.staff-tabs-selectors .tab a {
    color: #ffffff;
    font-family: arimo;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    padding: 30px 20px;
    position: relative;
    text-transform: capitalize;
}

.staff-tabs-selectors .tab a:hover {
    color: #FFF
}

.staff-tabs-selectors .tab a i {
    margin-right: 5px
}

.staff-tabs-selectors .tab a:before {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    content: "";
    height: 20px;
    margin-top: -10px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}

.staff-tabs-selectors .tab:last-child a:before {
    display: none
}

.staff-tabs-selectors .tabs .indicator {
    background: #FFF
}

.staff-tab-content {
    background: #fafafa;
    float: left;
    padding: 40px 70px 80px;
    width: 100%;
}

.staff-tab-content p {
    font-size: 14px;
    line-height: 28px;
}

.all-skills {
    float: left;
    margin-bottom: -50px;
    width: 100%;
}

.progess-container {
    float: left;
    margin-bottom: 50px;
    width: 100%;
}

.progess-container>strong {
    color: #454545;
    float: left;
    font-family: arimo;
    font-size: 13px;
    font-weight: 800;
}

.progess-container>span {
    float: right;
    font-family: arimo;
    font-size: 14px;
}

.progess-container .progress {
    background: #c8c8c8 none repeat scroll 0 0;
    border-radius: 0;
    float: left;
    height: 6px;
    margin: 5px 0 0;
    width: 100%;
}

.staff-tab-content .all-skills {
    margin-top: 30px
}

.staff-tab-content .appointment-tab {
    background: rgba(0, 0, 0, 0) url("../images/resource/parallax3.jpg") repeat scroll 0 0;
    margin: 30px 0 0;
    padding: 70px 100px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.staff-tab-content .appointment-tab::before {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.dropdown-content li {
    height: auto;
    min-height: 10px;
    line-height: 20;
    clear: none;
}

.dropdown-content li>a,
.dropdown-content li>span {
    position: relative;
    right: auto;
    top: auto;
    font-size: 11px;
    padding: 6px 10px;
}

.picker__day--infocus {
    font-size: 12px
}

.picker__weekday-display {
    background: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-family: roboto;
    font-weight: 400;
    margin-bottom: 30px;
    padding: 13px 0;
}

.picker__close,
.picker__today {
    font-size: 12px
}

.picker__month-display {
    display: none
}

.picker__day-display {
    font-family: roboto;
    font-size: 50px;
    font-weight: 700;
}

.picker__year-display {
    display: none
}

.picker__date-display {
    padding-bottom: 30px
}

.picker__header {
    font-family: roboto;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 14px;
}

.picker__nav--prev:before,
.picker__nav--next:before {
    border-right: 7px solid;
}

.picker__nav--next:before {
    border-right: 0!important;
    border-left: 7px solid;
}

.picker__table th {
    padding: 10px;
    border-radius: 0;
    font-size: 12px;
    font-family: roboto;
}

.picker__nav--next {
    right: 0
}

.picker__nav--prev {
    left: 0
}

.btn-flat.picker__clear {
    font-size: 12px;
    background: black;
    color: #FFF;
    font-family: roboto;
}

.appointment-form .row>div {
    padding: 0
}


/*=============== Gallery Page ===================*/

.blank-box {
    float: left;
    width: 100%;
    height: 20px;
}

.simple-text-box {
    background: #ffffff;
    float: left;
    padding: 45px 50px;
    margin-bottom: 30px;
    width: 100%;
}

.simple-text-box>span {
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-weight: 300;
    width: 100%;
}

.simple-text-box h3 {
    color: #2d2d2d;
    float: left;
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0 15px;
    width: 100%;
}

.simple-text-box>p {
    float: left;
    margin: 0;
    width: 100%;
}

.gallery-images {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}

.gallery-img {
    float: left;
    position: relative;
    margin-bottom: 30px;
    width: 100%;
}

.gallery-img img {
    width: 100%
}

.simple-text-box.style2 {
    padding: 70px
}

.simple-text-box.style2>h3 {
    font-size: 18px;
    font-weight: 900;
    line-height: 27px;
}

.simple-text-box.style2>p {
    line-height: 27px
}

.dropcap {
    background: #f7f7f7;
    color: #a4a3a3;
    display: inline-block;
    float: left;
    font-family: roboto slab;
    font-size: 36px;
    font-weight: 700;
    height: 60px;
    line-height: 60px;
    margin-top: 10px;
    margin-right: 20px;
    text-align: center;
    vertical-align: top;
    width: 60px;
}

.no-gap>.row {
    margin: 0 -0.5px
}

.no-gap .masonary>div,
.no-gap .masonary2>div {
    padding: 0.5px
}

.no-gap .gallery-img,
.no-gap .simple-text-box {
    margin-bottom: 0.5px
}

.gallery-hover {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    opacity: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.7);
}

.gallery-img:hover .gallery-hover {
    opacity: 1;
    height: 100%;
    top: 0;
}

.hover-inner {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    padding: 30px 50px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hover-inner span {
    float: left;
    width: 100%;
    font-family: roboto;
    font-size: 13px;
    font-weight: 300;
    opacity: 0;
    margin-bottom: 5px;
    -webkit-tranform: translateY(30px);
    -moz-tranform: translateY(30px);
    -ms-tranform: translateY(30px);
    -o-tranform: translateY(30px);
    tranform: translateY(30px);
}

.hover-inner h4 {
    color: #FFF;
    font-size: 15px;
    float: left;
    width: 100%;
    line-height: 22px;
    margin: 0 0 20px;
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}

.gallery-collection {
    float: left;
    opacity: 0;
    width: 100%;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
}

.gallery-img:hover .hover-inner span {
    transition: all 0.2s ease 0.3s;
}

.gallery-img:hover .hover-inner h4 {
    transition: all 0.2s ease 0.5s;
}

.gallery-img:hover .gallery-collection {
    transition: all 0.2s ease 0.7s;
}

.gallery-img:hover .hover-inner span,
.gallery-img:hover .hover-inner h4,
.gallery-img:hover .gallery-collection {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.gallery-collection a {
    display: inline-block;
    margin: 0 2px;
}

.gallery-collection img {
    width: auto
}


/*=============== Popup ===================*/

html.popup-active {
    overflow: hidden
}

html.popup-active body {
    overflow: hidden
}

html.popup-active body .theme-layout {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.popup {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    overflow: auto;
}

.popup-container {
    height: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.popup-container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.popup-wrapper {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 95%;
}

.consultaion-popup {
    background: rgba(0, 0, 0, 0) url("../images/consult-popup-bg.jpg") no-repeat scroll 0 0;
    display: table;
    margin: 80px auto;
    width: 970px;
}

.consult-contact {
    display: table-cell;
    padding: 90px 75px;
    text-align: center;
    vertical-align: bottom;
    width: 50%;
}

.consult-contact i {
    font-size: 50px
}

.consult-contact>p {
    color: #454545;
    float: left;
    font-size: 15px;
    margin: 30px 0 10px;
    width: 100%;
}

.consult-contact>p strong {
    font-weight: 900
}

.consult-contact>strong {
    float: left;
    font-family: arimo;
    font-size: 26px;
    font-weight: 900;
    width: 100%;
}

.consultaion-popup .appointment-form {
    display: table-cell;
    float: none;
    vertical-align: bottom;
    width: 50%;
}

.consultaion-popup form .input-field input {
    color: #858585;
    font-size: 11px;
    height: 53px;
}

.consultaion-popup form .input-field textarea {
    min-height: 130px;
}

.creative-title {
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

.creative-title>i {
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.4px;
    width: 100%;
}

.creative-title>h4 {
    color: #ffffff;
    float: left;
    font-size: 26px;
    margin: 5px 0;
    width: 100%;
}

.creative-title>span {
    color: #434343;
    float: left;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    width: 100%;
}

.consultaion-popup .appointment-form>form button {
    float: none;
    display: inline-block;
}

.appointment-popup {
    background: rgba(0, 0, 0, 0) url("../images/appointment-popup-bg.jpg") repeat scroll 0 0;
    display: table;
    margin: 80px auto;
    overflow: hidden;
    padding: 100px 100px 100px 400px;
    width: 1170px;
}

.style2 .appointment-details>span {
    color: #666666
}

.style2 .appointment-details>h4 {
    color: #555555
}

.style2 .appointment-details>p {
    color: #066666
}

.style2 .subtitle {
    color: #066666
}

.style2 .timing,
.style2 .timing i {
    color: #066666
}

.style2 form .input-field input {
    border: 1px solid #c3c2c2;
    height: 48px;
    -webkit-box-shadow: 0 0 2px #ffffff inset;
    -moz-box-shadow: 0 0 2px #ffffff inset;
    -ms-box-shadow: 0 0 2px #ffffff inset;
    -o-box-shadow: 0 0 2px #ffffff inset;
    box-shadow: 0 0 2px #ffffff inset;
}

.style2 .select-wrapper span.caret {
    background: rgb(84, 84, 84);
    background: -moz-linear-gradient(top, rgba(84, 84, 84, 1) 0%, rgba(64, 64, 64, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(84, 84, 84, 1) 0%, rgba(64, 64, 64, 1) 100%);
    background: linear-gradient(to bottom, rgba(84, 84, 84, 1) 0%, rgba(64, 64, 64, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#404040', GradientType=0);
    color: #FFF;
    width: 25px;
    height: 25px;
    font-size: 7px;
    border: 0;
    line-height: 25px;
    top: 12px;
    right: 12px;
}

.style2 form .input-field.simple-label label,
.style2 .appointment-form p {
    color: #666666
}

.gift-popup {
    background: rgba(0, 0, 0, 0) url("../images/gift-popup.jpg") repeat scroll 0 0;
    display: table;
    margin: 80px auto;
    padding: 110px;
    width: 1170px;
}

.send-gift {
    display: table;
    width: 100%;
}

.send-gift .mockup {
    display: table-cell;
    float: none;
    width: 47%;
}

.send-gift .mockup img {
    margin: -160px -150px -110px -150px;
    max-width: none;
    width: calc(100% + 220px);
}

.gift-popup-text {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    position: relative;
    z-index: 1;
}

.gift-popup-text>i {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    width: 100%;
}

.gift-popup-text>h3 {
    float: left;
    font-size: 36px;
    margin: 10px 0;
    text-transform: uppercase;
    width: 100%;
}

.gift-popup-text>span {
    float: left;
    font-family: roboto slab;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
}

.gift-popup-text>p {
    color: #454545;
    float: left;
    font-size: 14px;
    margin: 10px 0 0;
    padding: 0 50px;
    width: 100%;
}

.facny-btn-set {
    float: left;
    margin-left: -12%;
    margin-top: 50px;
    overflow: hidden;
    width: 124%;
}

.facny-btn-set>a {
    border-right: 1px solid #ffffff;
    color: #ffffff;
    float: left;
    padding: 35px 10px;
    text-align: center;
    width: 33.334%;
}

.facny-btn-set>a:last-child {
    border: 0 none
}

.facny-btn-set>a i.fancy-icon {
    color: #FFF;
    font-size: 33px;
}

.facny-btn-set>a strong {
    float: left;
    font-family: roboto slab;
    font-size: 14px;
    font-weight: 600;
    margin: 15px 0 0;
    text-transform: uppercase;
    width: 100%;
}

.facny-btn-set>a i {
    color: #f6f6f6;
    float: left;
    font-family: arimo;
    font-size: 11px;
    font-style: normal;
    width: 100%;
}

.facny-btn-set>a span {
    color: #ffffff;
    float: left;
    font-family: arimo;
    font-size: 13px;
    margin-top: 14px;
    padding: 0 22px;
    width: 100%;
}

.has-popup-content {
    display: none
}

.has-popup-content.active {
    display: table;
    margin: 0 auto
}

.has-popup-content>div {
    opacity: 0;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transition: all 0.4s ease 1s;
    -moz-transition: all 0.4s ease 1s;
    -ms-transition: all 0.4s ease 1s;
    -o-transition: all 0.4s ease 1s;
    transition: all 0.4s ease 1s;
}

.has-popup-content.active>div {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.event-registration {
    background: rgba(0, 0, 0, 0) url("../images/event-popup.jpg") no-repeat scroll 0 0 / cover;
    overflow: hidden;
    padding: 70px 30px 30px;
    position: relative;
    width: 1030px;
    z-index: 1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.event-registration:before {
    background: #ffffff;
    content: "";
    height: 100%;
    opacity: 0.92;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.event-popup-title {
    float: left;
    width: 50%;
}

.event-popup-title>i {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-style: normal;
    margin-bottom: 10px;
    width: 100%;
}

.event-popup-title>h3 {
    color: #2d2d2d;
    float: left;
    font-size: 36px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
    width: 100%;
}

.event-popup-title>h3 span {
    display: table;
    font-size: 20px;
    line-height: 20px;
    margin: 10px 0 0;
}

.event-info {
    border-bottom: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-top: 1px solid #dedede;
    float: right;
    overflow: hidden;
    width: 45%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.event-cell {
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    border-right: 1px solid #dedede;
    border-top: 1px solid #dedede;
    color: #141414;
    float: left;
    font-family: roboto;
    font-size: 14px;
    font-weight: 300;
    line-height: 30px;
    margin-top: -1px;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
}

.event-cell.half {
    float: left;
    width: 50%;
}

.event-popup-top {
    float: left;
    margin-bottom: 50px;
    width: 100%;
}

.event-registration .appointment-form form {
    text-align: center
}

.event-registration .appointment-form form button {
    display: inline-block;
    float: none;
}

.event-cell i {
    font-size: 15px;
    margin-right: 10px;
}


/*=============== Registration Page ===================*/

.registration-page {
    float: left;
    padding: 0 70px;
    width: 100%;
}

.registration-page {
    float: left;
    padding: 0 70px;
    width: 100%;
}

.theme-form {
    float: left;
    padding: 60px;
    position: relative;
    width: 50%;
    z-index: 1;
}

.login-form:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.1;
    z-index: -1;
}

.white-title {
    float: left;
    margin-bottom: 30px;
    padding-right: 50px;
    padding-top: 35px;
    position: relative;
    width: 100%;
}

.white-title i {
    color: #ffffff;
    font-size: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

.white-title>h4 {
    color: #ffffff;
    float: left;
    font-size: 22px;
    margin: 0 0 10px;
    width: 100%;
}

.white-title>span {
    color: #ffffff;
    float: left;
    font-family: arimo;
    font-size: 12px;
    width: 100%;
}

.theme-form form button {
    display: inline-block;
    float: none;
}

.theme-form form button i {
    margin-right: 5px
}

.theme-form form {
    text-align: center
}

.theme-form a {
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 300;
    line-height: 15px;
    margin: 15px 0 0;
    text-decoration: underline;
    width: 100%;
}

.other-logins {
    float: left;
    margin-top: 36px;
    text-align: center;
    width: 100%;
}

.other-logins strong {
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    width: 100%;
}

.other-logins>a {
    background: #3aa4e2 none repeat scroll 0 0;
    display: inline-block;
    float: none;
    height: 37px;
    line-height: 37px;
    margin: 0;
    text-align: center;
    width: 37px;
}


/*=============== Events Page ===================*/

.event {
    float: left;
    margin-bottom: 30px;
    overflow: hidden;
    width: 100%;
}

.all-events {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}

.event-top {
    float: left;
    position: relative;
    width: 100%;
}

.event-img {
    float: left;
    text-align: center;
    width: 100%;
}

.event-img>img {
    max-width: 100%
}

.event-detail {
    background: #fcfcfc;
    float: left;
    padding: 60px 30px;
    position: relative;
    text-align: center;
    width: 100%;
}

.org {
    background: #fcfcfc none repeat scroll 0 0;
    left: 50%;
    padding: 4px 29px 4px 4px;
    position: absolute;
    top: 0;
    white-space: nowrap;
    -webkit-border-radius: 23px 3px 0 0;
    -moz-border-radius: 23px 3px 0 0;
    -ms-border-radius: 23px 3px 0 0;
    -o-border-radius: 23px 3px 0 0;
    border-radius: 23px 3px 0 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.org>img {
    display: inline-block;
    vertical-align: middle;
}

.org>span {
    color: #777777;
    display: inline-block;
    font-family: arimo;
    font-size: 12px;
    margin-left: 20px;
    vertical-align: middle;
    white-space: nowrap;
}

.org>span i {
    font-style: normal
}

.event-detail>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 15px;
    line-height: 22px;
    margin: 0;
    width: 100%;
}

.event-detail>h4 a {
    color: inherit;
}

.event-bottom {
    background: #f0f0f0;
    color: #555555;
    float: left;
    font-family: arimo;
    font-size: 12px;
    padding: 25px;
    position: relative;
    width: 100%;
}

.event-date {
    float: left;
    width: 50%;
}

.event-time {
    float: left;
    text-align: right;
    width: 50%;
}

.map-icon {
    background: #ffffff;
    border: 10px solid #f0f0f0;
    color: #777777;
    cursor: pointer;
    font-size: 15px;
    height: 70px;
    left: 50%;
    line-height: 50px;
    margin-left: -35px;
    margin-top: -35px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 70px;
}

.map-icon i {
    -webkit-animation: 2s ease 0s normal none infinite running zoomInOut;
    -moz-animation: 2s ease 0s normal none infinite running zoomInOut;
    -ms-animation: 2s ease 0s normal none infinite running zoomInOut;
    -o-animation: 2s ease 0s normal none infinite running zoomInOut;
    animation: 2s ease 0s normal none infinite running zoomInOut;
}

.event .map>div {
    height: 100%;
    min-height: 0;
}

.event .map {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0;
}

.event.active .map {
    top: 0;
    opacity: 1;
}

.active .map-icon i:before {
    content: "\f00d"
}


/*=============== Event Detail Page ===================*/

.event-detail-page {
    float: left;
    position: relative;
    width: 100%;
}

.event-detail-img {
    float: left;
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    width: 100%;
}

.event-detail-img.with-counter {
    padding-left: 90px
}

.event-detail-img>img {
    max-width: 100%
}

.event-detail-img>span {
    border: 10px solid #ffffff;
    bottom: -30px;
    color: #ffffff;
    font-size: 18px;
    height: 60px;
    line-height: 42px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    width: 60px;
    z-index: 1;
}

.event-detail-img.active>span i:before {
    content: "\f00d"
}

.event-detail-img .map {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.event-detail-img .map>div {
    height: 100%;
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
}

.event-detail-img.active .map>div {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.timer {
    left: 0;
    padding-right: 25px;
    position: absolute;
    text-align: right;
    top: 0;
    width: 90px;
}

.timer span {
    float: left;
    font-family: roboto;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    padding-bottom: 45px;
    position: relative;
    width: 100%;
}

.timer span:before {
    background: #c8c8c8;
    bottom: 0;
    content: "";
    height: 30px;
    position: absolute;
    right: 0;
    width: 1px;
}

.timer span:last-child:before {
    display: none
}

.timer span i {
    display: block;
    font-style: normal;
    color: #505050;
    font-size: 22px;
    line-height: 20px;
}

.single-description blockquote {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 0 none;
    color: #666666;
    float: left;
    font-family: arimo;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.3px;
    padding: 30px 70px;
    text-align: center;
    width: 100%;
}

.top-space {
    float: left;
    margin-top: 60px;
    width: 100%;
}

.tagcloud {
    float: left;
    margin-bottom: -10px;
    padding-left: 20px;
    width: 100%;
}

.tagcloud>a {
    border: 1px solid #d6d6d6;
    color: #666666;
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-right: 30px;
    padding: 12px 30px;
    position: relative;
    z-index: 1;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.tagcloud>a:before {
    background: #d6d6d6;
    content: "";
    height: 1px;
    width: 30px;
    position: absolute;
    left: -20px;
    top: 50%;
}

.tagcloud>a:after {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 51%, rgba(240, 240, 240, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 51%, rgba(240, 240, 240, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 51%, rgba(240, 240, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=0);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.tagcloud>a:hover:after {
    opacity: 0
}

.admin {
    display: table;
    width: 100%;
}

.social-links {
    border-right: 3px solid #ffffff;
    display: table-cell;
    vertical-align: top;
    width: 53px;
}

.admin>img {
    display: table-cell;
    vertical-align: top;
}

.admin-info {
    background: #fafafa none repeat scroll 0 0;
    display: table-cell;
    padding: 50px;
    vertical-align: middle;
}

.admin-info>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 18px;
    margin: 0 0 20px;
    width: 100%;
}

.admin-info>p {
    float: left;
    margin: 0;
    width: 100%;
}

.social-links a {
    color: #ffffff;
    float: left;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    text-align: center;
    width: 100%;
}

.facebook,
.facebook-hover:hover {
    background: #215a99
}

.google-plus,
.google-plus-hover:hover {
    background: #d64e3b
}

.twitter,
.twitter-hover:hover {
    background: #00acf1
}

.comments-section {
    float: left;
    width: 100%;
}

.comments-section ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.comments-section ul li {
    float: left;
    width: 100%;
}

.comment {
    background: #fafafa none repeat scroll 0 0;
    display: table;
    margin-bottom: 20px;
    padding: 65px;
    position: relative;
    width: 100%;
}

.comment>img {
    float: left;
    margin-right: 35px;
}

.comment>h4 {
    color: #2d2d2d;
    font-size: 16px;
    margin: 0;
}

.comment-date {
    color: #a2a2a2;
    font-family: arimo;
    font-size: 11px;
    font-style: italic;
    position: absolute;
    right: 30px;
    top: 30px;
}

.comment>p {
    color: #666666;
    font-size: 13px;
}

.comment>a {
    display: table;
    font-family: roboto;
    font-size: 12px;
    font-weight: 700;
    margin-top: 20px;
    text-decoration: underline;
}

.comments-section ul ul {
    padding-left: 50px
}

.comment-form {
    float: left;
    margin-top: 40px;
    width: 100%;
}

.comment-form .input-field input,
.comment-form .input-field textarea {
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(252, 252, 252, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);
    border: 1px solid #f2f2f2;
    color: #929292;
    font-family: arimo;
    font-size: 11px;
}

.comment-form .input-field input {
    height: 50px
}

.comment-form form>.row {
    margin: 0 -2.5px
}

.comment-form form .input-field {
    margin-top: 10px;
    padding: 0 5px !important;
}

.blog-detail-img {
    float: left;
    margin-bottom: 50px;
    padding-left: 75px;
    position: relative;
    width: 100%;
}

.blog-detail-img>img {
    max-width: 100%
}

.blog-detail-img .tip-meta {
    position: absolute;
    left: 0;
    top: 0;
}

.blog-detail-page {
    float: left;
    width: 100%;
}

.post-share {
    max-height: 50%;
    width: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.post-share>a {
    background: #f7f7f7;
    color: #757575;
    float: left;
    font-size: 12px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    width: 100%;
}

.post-share>a:nth-child(2n+2) {
    background: #f0f0f0
}


/*=============== Event Calendar ===================*/

.fc-toolbar {
    display: table;
    margin: 0;
    padding: 30px 200px;
    width: 100%;
}

.fc-toolbar button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #f2f2f2;
    box-shadow: none;
    color: #ffffff;
    font-family: roboto;
    font-size: 12px;
    font-weight: 600;
    height: auto;
    padding: 10px 30px;
    text-shadow: none;
    text-transform: capitalize;
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    -ms-border-radius: 30px !important;
    -o-border-radius: 30px !important;
    border-radius: 30px !important;
}

.fc-toolbar h2 {
    color: #ffffff;
    font-size: 20px;
    padding: 6px 0;
    text-transform: uppercase;
}

.fc-day-header {
    background: #000000 none repeat scroll 0 0;
    color: #ffffff;
    font-family: roboto slab;
    font-size: 13px;
    line-height: 60px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.fc td,
.fc th {
    border: 0 none;
    border-radius: 0;
}

.fc-day-header:before {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.fc-day-header:nth-child(2n+2):before {
    background: rgba(0, 0, 0, 0.05)
}

.fc-day {
    background: #f6f5f5
}

.fc-day:nth-child(2n+1) {
    background: #faf9f9
}

.fc-row:nth-child(2n+1) .fc-day {
    background: #faf9f9
}

.fc-row:nth-child(2n+1) .fc-day:nth-child(2n+1) {
    background: #f6f5f5
}

.fc-day-number {
    color: #747474;
    font-family: arimo;
    font-size: 14px;
    padding: 20px 30px 10px !important;
}

.fc-day-number {
    color: #747474;
    font-family: arimo;
    font-size: 14px;
    padding: 10px 20px 10px !important;
}

.fc-content {
    color: #ffffff;
    float: left;
    font-size: 12px;
    padding: 12px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.fc-time {
    float: left;
    width: 100%;
}

.fc-title {
    float: left;
    width: 100%;
}

.fc-day-grid-event {
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0 0 5px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.fc-day {
    background: #f6f5f5 none repeat scroll 0 0;
    min-height: 120px !important;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border: 0 none;
}

a.fc-more {
    background: #000000 none repeat scroll 0 0;
    border-radius: 30px;
    color: #ffffff;
    display: inline-block;
    font-size: 9px !important;
    font-weight: 700;
    margin: 0;
    padding: 6px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.fc-more-cell {
    padding: 0 10px !important;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
    padding: 0 10px;
}


/*=============== Appointment Form Image ===================*/

.appointment-form-img {
    float: left;
    margin: -90px 0;
    padding-right: 130px;
    position: relative;
    width: 100%;
}

.appointment-form-img>img {
    width: 100%
}

.appointment-form-img .appointment-form {
    position: absolute;
    right: 0;
    top: 50%;
    width: 420px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.welcome {
    float: left;
    padding-left: 50px;
    padding-right: 150px;
    width: 100%;
}

.welcome>span {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    width: 100%;
}

.welcome>h2 {
    color: #2d2d2d;
    float: left;
    font-size: 40px;
    font-weight: 900;
    margin: 8px 0 20px;
    width: 100%;
}

.welcome>h2 strong {
    display: table;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
}

.welcome>p {
    float: left;
    margin: 0 0 10px;
    width: 100%;
}

.welcome .list {
    margin-top: 20px
}

.welcome .icon-btn {
    margin-top: 50px
}


/*=============== Specialists ===================*/

.specialist {
    display: table;
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.all-specialist {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}

.specialist-img {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}

.specialist-detail {
    display: table-cell;
    padding-left: 35px;
    vertical-align: middle;
    width: 100%;
}

.specialist-img .social-icons {
    bottom: 0;
    left: 0;
    padding: 0 20px 20px;
    position: absolute;
    text-align: center;
}

.specialist-img .social-icons a {
    display: inline-block;
    float: none;
    margin: 0 1px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 600ms cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
    /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    /* easeInOutBack */
}

.specialist:hover .specialist-img .social-icons a {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.specialist-detail h5 {
    color: #2d2d2d;
    float: left;
    font-size: 22px;
    font-weight: 200;
    margin: 0 0 10px;
    width: 100%;
}

.specialist-detail h5 strong {
    font-weight: 700;
}

.specialist-detail>span {
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 500;
    line-height: 13px;
    width: 100%;
}

.specialist-detail>ul {
    float: left;
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0;
    width: 100%;
}

.specialist-detail li {
    color: #454545;
    float: left;
    font-size: 14px;
    margin-bottom: 5px;
    width: 100%;
}

.specialist-detail li i {
    float: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    width: 40%;
}

.specialist-detail li.vac {
    margin: 25px 0 0
}

.specialist-detail li.vac i {
    color: #ffffff;
    font-size: 11px;
    margin-right: 20px;
    padding: 5px 10px;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    width: auto;
}


/*=============== Cart Page ===================*/

.cart-table {
    float: left;
    width: 100%;
}

.cart-table thead {
    background: #4a4a4a none repeat scroll 0 0;
    border: 0 none;
}

.cart-table thead th {
    color: #ffffff;
    font-family: roboto slab;
    font-size: 13px;
    font-weight: 500;
    padding: 20px 40px;
    text-align: center;
    text-transform: uppercase;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.cart-table thead th:nth-child(2n+2) {
    background: #3c3c3c
}

.cart-table tbody {
    background: #faf9f9
}

.cart-product {
    display: table;
    width: 100%;
}

.cart-table td {
    padding: 30px 50px;
    position: relative;
}

.cart-product img {
    display: table-cell
}

.cart-product-detail {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
    width: 100%;
}

.cart-product-detail>h4 {
    color: #303030;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.cart-product-detail h4 a {
    color: inherit
}

.cart-product-detail .fa-3x {
    font-size: 15px;
    color: #dcc025;
}

.cart-table td:nth-child(2n+2) {
    background: #f6f5f5
}

.cart-table td>span,
.cart-table td>strong {
    color: #797979;
    display: block;
    font-family: roboto;
    font-size: 16px;
    text-align: center;
}

.cart-table tr {
    border-bottom: 2px solid #ffffff
}

.cart-product>span {
    background: #faf9f9 none repeat scroll 0 0;
    height: 40px;
    cursor: pointer;
    left: -20px;
    line-height: 40px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
}

.contact-infobox {
    background: #f6f6f6;
    float: left;
    padding: 30px 30px 30px 80px;
    width: 100%;
}

.infobox-title {
    display: inline-block;
    margin-right: -5px;
    vertical-align: middle;
    width: 30%;
}

.infobox-title h3 {
    color: #2d2d2d;
    float: left;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 5px;
    width: 100%;
}

.infobox-title>p {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    margin: 0;
    width: 100%;
}

.contact-infobox .facny-btn-set {
    display: inline-block;
    float: none;
    margin: 0;
    vertical-align: middle;
    width: 70%;
}

.contact-infobox .facny-btn-set a {
    padding: 25px;
    text-align: left;
}

.contact-infobox .facny-btn-set a img {
    float: left;
    margin-right: 20px;
    margin-top: 2px;
}

.contact-infobox .facny-btn-set a strong {
    display: flex;
    float: none;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
    margin-top: 0;
    width: auto;
}

.contact-infobox .facny-btn-set>a i {
    width: auto
}

.contact-infobox .facny-btn-set a span {
    display: flex;
    float: none;
    font-size: 12px;
    line-height: 18px;
    margin-top: 3px;
    padding: 0;
    text-align: left;
    width: auto;
}

.contact-infobox .facny-btn-set:hover>a:hover,
.contact-infobox .facny-btn-set:hover>a {
    width: 33.334%
}

.contact-infobox .facny-btn-set>a i.fancy-icon {
    margin-right: 15px;
}

.coupon-box {
    background: #fafafa;
    float: left;
    padding: 75px 50px;
    width: 100%;
}

.coupon-box h5 {
    color: #302f2f;
    float: left;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin: 0 0 6px;
    width: 100%;
}

.coupon-box>span {
    color: #302f2f;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
    width: 100%;
}

.coupon {
    float: left;
    margin-top: 30px;
    width: 100%;
}

.coupon>input {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #f1f1f1;
    box-sizing: border-box;
    color: #858585;
    float: left;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    height: 54px;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 10px 20px;
    vertical-align: middle;
    width: 68%;
}

.coupon>button,
.coupon>button:hover {
    border: 0;
    margin: 0 0 0 2%;
    padding: 19px 10px;
    width: 30%;
}

.cart-totals {
    background: #fafafa;
    float: left;
    padding: 20px 30px;
    width: 100%;
}

.cart-totals caption {
    background: #4a4a4a;
    border: 0 none;
    color: #ffffff;
    font-family: roboto slab;
    font-size: 16px;
    font-weight: 700;
    padding: 20px;
    text-align: center;
    width: 100%;
}

.cart-totals tr {
    background: #ffffff;
    border-bottom: 2px solid #fafafa;
}

.cart-totals span,
.cart-totals i {
    color: #4c4c4c;
    float: left;
    font-family: roboto;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 3px 40px;
    width: 100%;
}

.cart-totals i {
    font-style: normal;
    text-align: right;
}


/*=============== Checkout Page ===================*/

.billing-form {
    background: #f9f9f9;
    float: left;
    padding: 70px 0;
    width: 100%;
}

.black-title {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.black-title>h4 {
    color: #494949;
    float: left;
    font-size: 20px;
    margin: 0 0 5px;
    width: 100%;
}

.black-title>span {
    color: #888888;
    float: left;
    font-family: roboto;
    font-size: 13px;
    width: 100%;
}

.black-title {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.black-title>h4 {
    color: #494949;
    float: left;
    font-size: 20px;
    margin: 0 0 5px;
    width: 100%;
}

.black-title>span {
    color: #888888;
    float: left;
    font-family: roboto;
    font-size: 13px;
    width: 100%;
}

.billing-payments tr {
    border-bottom: 1px solid #dee1e2
}

.billing-payments tr:last-child {
    border: 0
}

.billing-payments tr span {
    color: #646464;
    float: left;
    font-family: roboto;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
}

.billing-payments tr i {
    color: #373838;
    float: left;
    font-family: roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
    width: 100%;
}

.billing-payments {
    float: left;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
}

.input-field input[type="radio"]~label {
    display: inline-block;
    height: auto;
}

.billing-payments form p {
    float: left;
    margin-bottom: 0;
    margin-top: 20px;
    width: 100%;
}


/*=============== Refer A Patient ===================*/

.refer-text {
    float: left;
    padding-right: 80px;
    width: 100%;
}

.refer-patient .row>div {
    display: inline-block;
    float: none;
    margin: 0 -3px;
    vertical-align: middle;
}

.refer-text {
    float: left;
    width: 100%;
}

.refer-text>p {
    font-size: 14px;
    line-height: 28px;
    margin: 0;
}

.toggle.fancy .toggle-item h3 {
    color: #ffffff;
    font-size: 14px;
    text-transform: uppercase;
}

.toggle.fancy .toggle-item h3 span {
    padding: 20px
}

.toggle.fancy .toggle-item h3 i {
    font-size: 25px;
    vertical-align: middle;
    width: 70px;
}

.toggle.fancy .toggle-item h3:before {
    background: rgba(0, 0, 0, 0.1);
    color: #ffffff;
    font-size: 12px;
    padding-left: 2px;
    right: 20px;
    top: 23px;
}

.content form {
    float: left;
    padding: 30px;
    width: 100%;
}

.content form .input-field label {
    font-size: 12px;
    font-weight: 300;
    color: #858585;
}

.toggle .coloured-btn {
    float: right;
    font-size: 13px;
    font-weight: 500;
    margin-top: 20px;
    padding: 15px 30px;
}


/*=============== Health Insurance ===================*/

.health-ins {
    display: table;
    float: left;
    width: 100%;
}

.health-ins>img {
    display: table-cell
}

.health-ins-desc {
    display: table-cell;
    padding-left: 60px;
    vertical-align: middle;
    width: 100%;
}

.health-ins-desc .side-title>span {
    font-size: 16px
}

.health-ins-desc .side-title h2 {
    font-size: 28px
}

.health-ins-desc .side-title h2 strong {
    font-weight: 800;
    text-transform: uppercase;
}

.health-ins-desc>p {
    color: #454545;
    float: left;
    font-size: 14px;
    line-height: 28px;
    margin-top: 0;
    width: 100%;
}

.free-consultation {
    background: #ffffff;
    display: table;
    float: left;
    margin-left: -25%;
    margin-top: 20px;
    padding: 30px 70px;
    position: relative;
    width: 125%;
    z-index: 1;
}

.cons-info {
    display: table-cell;
    padding-bottom: 10px;
    padding-left: 100px;
    padding-top: 10px;
    position: relative;
    vertical-align: middle;
    width: 60%;
}

.cons-btn {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 100%;
}

.cons-info>span {
    background: #fafafa;
    font-size: 40px;
    height: 80px;
    left: 0;
    line-height: 80px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 80px;
}

.cons-info>strong {
    float: left;
    font-family: roboto slab;
    font-size: 23px;
    font-weight: 600;
    width: 100%;
}

.cons-info>p {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    margin: 0;
    width: 100%;
}


/*=============== Insurance Add ===================*/

.insurance-add {
    display: table;
    padding: 40px 80px;
    width: 100%;
}

.insurance-add>span {
    color: #ffffff;
    display: table-cell;
    font-size: 60px;
    line-height: 60px;
    margin-right: 30px;
    vertical-align: middle;
}

.ins-add-text {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
    width: 100%;
}

.ins-add-text>strong {
    color: #ffffff;
    float: left;
    font-family: roboto slab;
    font-size: 22px;
    font-weight: 600;
    width: 100%;
}

.ins-add-text>i {
    color: #f6f6f6;
    display: table;
    font-size: 13px;
    font-style: normal;
}

.steps-guide {
    float: left;
    width: 100%;
}

.steps-guide>.row>div {
    display: inline-block;
    margin: 0 -3px;
    float: none;
    vertical-align: middle;
}

.steps-guide-text {
    float: left;
    width: 100%;
}

.steps-guide-text>span {
    color: #8b8b8b;
    float: left;
    font-family: roboto;
    font-size: 13px;
    width: 100%;
}

.steps-guide-text>strong {
    color: #2d2d2d;
    float: left;
    font-family: roboto slab;
    font-size: 32px;
    font-weight: 700;
    line-height: 35px;
    margin: 10px 0 20px;
    width: 100%;
}

.steps-guide-text>strong i {
    font-size: 25px;
    font-style: normal;
    text-transform: uppercase;
}

.steps-guide-text>p {
    float: left;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    width: 100%;
}

.steps-guide-text>p {
    float: left;
    font-size: 14px;
    line-height: 28px;
    margin: 0;
    width: 100%;
}

.steps .contact-box {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.steps .contact-box>span {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-size: 40px;
    height: auto;
    line-height: normal;
    width: auto;
}

.steps .contact-box>strong {
    font-size: 18px
}

.steps .contact-box>p {
    color: #ffffff;
    line-height: 21px;
    padding: 0 5px;
}


/*=============== Insurance Benifits ===================*/

.ins-benifits {
    float: left;
    position: relative;
    width: 100%;
}

.ins-benifits:before {
    background: #ffffff;
    content: "";
    height: 100%;
    opacity: 0.95;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.ins-benifits .row {
    margin: 0
}

.ins-benifits .col {
    padding: 0
}

.benifit {
    float: left;
    padding: 90px 70px;
    text-align: center;
    width: 100%;
}

.ins-benifits .col:nth-child(2n+2) .benifit {
    background: rgba(0, 0, 0, 0.07)
}

.benifit>h4 {
    color: #444444;
    float: left;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 12px;
    text-transform: uppercase;
    width: 100%;
}

.benifit>p {
    color: #454545;
    float: left;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 28px;
    margin: 0 0 25px;
    width: 100%;
}

.benifit>a.coloured-btn {
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.benifit>a.coloured-btn:hover {
    border-color: #555;
    color: #555;
}


/*=============== Sidebar ===================*/

.sidebar .widget-title>h4 {
    color: #2d2d2d;
    font-size: 20px;
    font-weight: 600;
}

.sidebar .widget-title>span {
    float: left;
    width: 100%;
    margin-top: 5px;
}

.sidebar .widget-title {
    border-bottom: 2px solid #ebebeb;
    padding-bottom: 15px;
}

.sidebar .about-widget>p {
    color: #555
}

.sidebar .widget {
    margin-bottom: 60px
}

.sidebar .widget>ul {
    background: #fafafb;
    padding: 50px 30px;
}

.sidebar .widget>ul li {
    color: #555555
}

.sidebar .timing {
    color: #555
}

.recent-posts {
    float: left;
    width: 100%;
    margin-bottom: -40px;
}

.widget-post {
    float: left;
    width: 100%;
    margin-bottom: 40px;
}

.widget-post-img {
    display: table-cell;
    vertical-align: top;
}

.widget-post-name {
    display: table-cell;
    padding-left: 25px;
    vertical-align: middle;
    width: 100%;
}

.widget-post-name>span {
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
    width: 100%;
}

.widget-post-name h5 {
    color: #444444;
    float: left;
    font-size: 14px;
    line-height: 22px;
    margin: 0;
    width: 100%;
}

.widget-post-name h5 a {
    color: inherit
}

.widget>ul.style2 {
    padding: 30px 0
}

.widget>ul.style2 li {
    float: left;
    padding: 5px 10px 5px 20px;
    width: 100%;
}

.widget>ul.style2 li a {
    padding-right: 40px
}

.widget>ul.style2 li:before {
    display: none
}

.widget>ul.style2 li span {
    background: #ffffff none repeat scroll 0 0;
    color: #a1a1a1;
    font-size: 11px;
    line-height: 20px;
    padding: 5px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 4px;
    width: 60px;
}

.widget>ul.style2 li:after {
    content: "";
    height: 0;
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 50%;
    width: 1px;
}

.widget>ul.style2 li:hover:after {
    margin-top: -3px;
    height: 6px;
}

.sidebar .tagcloud>a {
    font-size: 12px;
    padding: 9px 17px;
}

.sidebar .author>i {
    font-size: 12px
}

.sidebar .fancy-post-intro {
    padding: 30px
}

.textwidget {
    background: #fafafb none repeat scroll 0 0;
    float: left;
    padding: 20px 25px 30px;
    width: 100%;
}

.textwidget>p {
    float: left;
    width: 100%;
}

.social-icons.style2>a {
    background: #ffffff;
    color: #333;
}

.social-icons.style2>a:hover {
    color: #FFF
}

.textwidget .social-icons {
    margin-top: 10px
}

.med-event-date {
    border: 3px solid #fafafa;
    float: left;
    font-family: roboto;
    font-size: 12px;
    font-weight: 600;
    height: 79px;
    margin-right: 20px;
    padding: 12px;
    text-align: right;
    width: 79px;
}

.med-event:hover .med-event-date {
    color: #FFF
}

.med-event>h4 {
    color: #444444;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 20px;
    margin: 20px 0 0;
}

.med-event>h4 a {
    color: inherit
}

.med-event {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.event-widget {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}


/*=============== Footer ===================*/

footer {
    background: #10222d;
    float: left;
    width: 100%;
    position: relative;
}

footer:before {
    /* Permalink - use to edit and share this gradient:http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000', GradientType=0);
    /* IE6-9 */
    content: "";
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.66;
}

.footer-decoration {
    background: #152b38 none repeat scroll 0 0;
    height: 145px;
    left: 0;
    position: absolute;
    top: 0;
    width: 156px;
    z-index: 0;
}

.footer-decoration.bottom {
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
}

.footer-decoration::before {
    border-left: 25px solid #10222d;
    border-top: 25px solid #10222d;
    bottom: 0;
    content: "";
    height: 73px;
    position: absolute;
    right: 0;
    width: 73px;
    z-index: -1;
}

footer .block {
    padding: 90px 0 50px
}

.block.extra-top-gap {
    padding-top: 170px
}

.widget {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.widget-title {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.widget-title>h4 {
    color: #ffffff;
    float: left;
    font-size: 18px;
    margin: 0 0 5px;
    text-transform: uppercase;
    width: 100%;
}

.widget-title>span {
    color: #898989;
    float: left;
    font-family: roboto;
    font-size: 13px;
    letter-spacing: 0.5px;
    width: 100%;
}

.about-widget {
    float: left;
    width: 100%;
}

.about-widget>p {
    color: #bdbdbd;
    line-height: 26px;
    margin: 0 0 30px;
}

.social-icons {
    float: left;
    width: 100%;
}

.social-icons>a {
    background: #182d3a none repeat scroll 0 0;
    color: #ffffff;
    float: left;
    font-size: 13px;
    height: 37px;
    line-height: 37px;
    margin-right: 5px;
    text-align: center;
    width: 37px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.social-icons>a:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    z-index: -1;
}

.social-icons>a:hover:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.widget ul li {
    color: #bdbdbd;
    font-family: arimo;
    font-weight: 200;
    margin-bottom: 10px;
}

.widget ul li a {
    color: inherit
}

.widget ul ul {
    margin: 10px 0 20px
}

.opening {
    float: left;
    padding-right: 50px;
    width: 100%;
}

.timing {
    color: #dadada;
    float: left;
    font-family: roboto;
    font-size: 13px;
    line-height: 25px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.timing:last-child {
    margin: 0
}

.timing>span {
    float: left;
    padding-right: 10px;
    width: 50%;
}

.timing>i {
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-style: normal;
    padding-left: 10px;
    text-align: right;
    width: 50%;
}

.timing:before {
    content: "-";
    font-size: 19px;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.gallery-widget {
    float: left;
    margin-bottom: -10px;
    width: 100%;
}

.gallery-widget .row {
    margin: 0 -5px
}

.gallery-widget .row>div,
.container .gallery-widget .row>div {
    padding: 0 5px
}

.gallery-widget img {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.gallery-widget img {
    width: 100%
}

.gallery-widget img:hover {
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);
}

.newsletter {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.newsletter .widget-title {
    display: table-cell;
    float: none;
    width: auto;
}

.newsletter form {
    display: table-cell;
    margin: 0;
    vertical-align: top;
    width: 70%;
}

.newsletter form button {
    background: #000000 none repeat scroll 0 0;
    border: 0 none;
    color: #ffffff;
    float: left;
    font-family: roboto;
    font-size: 11px;
    height: 50px;
    font-weight: 800;
    margin-left: 30px;
    margin-top: 0;
    padding: 10px 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.newsletter form input {
    background: #ffffff none repeat scroll 0 0;
    border: 0 none;
    color: #808080;
    float: left;
    font-family: roboto;
    font-size: 13px;
    margin: 0;
    padding: 0 30px;
    width: 410px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.newsletter .container {
    width: 930px
}

footer .container {
    position: relative
}

footer.light {
    background: #f7f8f8
}

footer.light:before {
    opacity: 0.1
}

.light .footer-decoration {
    background: #f1f1f1
}

.light .footer-decoration::before {
    border-color: #f7f8f8
}

footer.light .widget-title>h4 {
    color: #2d2d2d
}

footer.light .widget-title>span {
    color: #a9a9a9
}

footer.light .about-widget>p,
footer.light .widget ul li,
footer.light .timing {
    color: #666666
}


/*=============== Bottom Footer ===================*/

.bottom-footer {
    background: #10222d;
    float: left;
    padding: 30px 0;
    width: 100%;
}

.bottom-footer p {
    color: #cbc9c9;
    float: left;
    font-family: roboto;
    font-size: 13px;
    margin: 0;
}

.bottom-footer ul {
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 4px 0 0;
}

.bottom-footer ul li {
    border-left: 1px solid #bfbebf;
    color: #cbc9c9;
    float: left;
    font-family: roboto;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
}

.bottom-footer ul li a {
    color: inherit;
    float: left;
    padding: 0 20px;
}

.bottom-footer ul li:first-child a {
    padding-left: 0
}

.bottom-footer ul li:first-child {
    border: 0
}


/* ===============================================================
    OWL CAROUSEL STYLING
================================================================*/

.owl-carousel .animated {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
    z-index: 0
}

.owl-carousel .owl-animated-out {
    z-index: 1
}

.owl-carousel .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.owl-height {
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out
}

.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0, 0)
}

.owl-carousel .owl-controls .owl-dot,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-nav .owl-prev {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel.owl-loaded {
    display: block
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block
}

.owl-carousel.owl-hidden {
    opacity: 0
}

.owl-carousel .owl-refresh .owl-item {
    display: none
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.owl-carousel .owl-item img {
    display: block;
    -webkit-transform-style: preserve-3d
}

.owl-carousel.owl-text-select-on .owl-item {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto
}

.owl-carousel .owl-grab {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab
}

.owl-carousel.owl-rtl {
    direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
    float: right
}

.no-js .owl-carousel {
    display: block
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease
}

.owl-carousel .owl-item img {
    transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: url(owl.video.play.png) no-repeat;
    cursor: pointer;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transition: scale 100ms ease;
    -moz-transition: scale 100ms ease;
    -ms-transition: scale 100ms ease;
    -o-transition: scale 100ms ease;
    transition: scale 100ms ease
}

.owl-carousel .owl-video-play-icon:hover {
    -webkit-transition: scale(1.3, 1.3);
    -moz-transition: scale(1.3, 1.3);
    -ms-transition: scale(1.3, 1.3);
    -o-transition: scale(1.3, 1.3);
    transition: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
    display: none
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    -webkit-transition: opacity 400ms ease;
    -moz-transition: opacity 400ms ease;
    -ms-transition: opacity 400ms ease;
    -o-transition: opacity 400ms ease;
    transition: opacity 400ms ease
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    100% {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    100% {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes jello {
    0%,
    100%,
    11.1% {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {
    0%,
    100%,
    11.1% {
        -webkit-transform: none;
        transform: none
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
        transform: skewX(0.390625deg) skewY(0.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes bounceIn {
    0%,
    100%,
    20%,
    40%,
    60%,
    80% {
        -webkit-animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(0.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.5)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes zoomInOut {
    0% {
        -moz-transform: scale(1)
    }
    50% {
        -moz-transform: scale(1.5)
    }
    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes zoomInOut {
    0% {
        -ms-transform: scale(1)
    }
    50% {
        -ms-transform: scale(1.5)
    }
    100% {
        -ms-transform: scale(1)
    }
}

@-o-keyframes zoomInOut {
    0% {
        -o-transform: scale(1)
    }
    50% {
        -o-transform: scale(1.5)
    }
    100% {
        -o-transform: scale(1)
    }
}

@keyframes zoomInOut {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
    100% {
        transform: scale(1)
    }
}

#materialbox-overlay {
    z-index: 999
}

input:focus:not([type]):not([readonly]),
input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="date"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="search"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}


/*====================================
       Version 1.1 
========================================*/


/*=============== Doctors Timetable Page ===================*/

.doctors-timetable {
    float: left;
    width: 100%;
}

.doctors-timetable .tabs {
    background: rgba(0, 0, 0, 0) url("../images/resource/parallax3.jpg") repeat scroll center center;
    float: left;
    height: auto;
    padding: 0 20px;
    position: relative;
    width: 100%!important;
    z-index: 1;
}

.doctors-timetable .tabs li a,
.doctors-timetable .tabs li a:hover,
.doctors-timetable .tabs li a.active:hover {
    color: #fff;
    font-family: roboto slab;
    font-size: 13px;
    font-weight: 600;
    height: auto;
    padding: 20px 23px;
    position: relative;
    text-align: center;
}

.doctors-timetable .tabs li.tab {
    height: auto
}

.doctors-timetable .tabs:before {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.doctors-timetable .tabs li a i {
    margin-right: 5px;
    opacity: 0;
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px);
}

.doctors-timetable .tabs .indicator {
    display: none
}

.doctors-timetable .tabs li a.active i {
    opacity: 1;
    -webkit-transform: translate(0px);
    -moz-transform: translate(0px);
    -ms-transform: translate(0px);
    -o-transform: translate(0px);
    transform: translate(0px);
}

.staff-timetable {
    float: left;
    width: 100%;
}

.timetable-tab-content {
    background: #f8f8f8;
    float: left;
    padding: 100px;
    width: 100%;
    margin-bottom: -30px;
}

.doc-time {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.doc-time>img {
    display: inline-block;
    vertical-align: middle;
    width: 57.446%;
}

.doc-detail {
    background: #fff none repeat scroll 0 0;
    display: inline-block;
    margin-left: -13.3%;
    padding-bottom: 45px;
    text-align: center;
    vertical-align: middle;
    width: 54.893%;
}

.doc-detail>h4 {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    float: left;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 30px 20px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.doc-detail>h4 i {
    margin-right: 5px
}

.doc-detail>ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 35px 45px;
    text-align: left;
    width: 100%;
}

.doc-detail>ul li {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}

.doc-detail>ul li:last-child {
    margin: 0
}

.doc-detail>ul li strong {
    color: #6e6e6e;
    float: left;
    font-family: roboto slab;
    font-size: 12px;
    font-weight: 500;
    width: 50%;
}

.doc-detail>ul li span {
    float: left;
    font-family: arimo;
    font-size: 12px;
    width: 50%;
}

.dark-btn {
    background: linear-gradient(#494a4a, #434444, #3b3c3c);
    color: #fff;
    display: inline-block;
    font-family: roboto;
    font-size: 12px;
    padding: 17px 35px;
}

.dark-btn i {
    margin-right: 5px
}

.dark-btn:hover,
.dark-btn:focus {
    color: #FFF
}

.close-all-popup {
    border: 2px solid #fff;
    color: #fff;
    font-size: 17px;
    height: 45px;
    line-height: 41px;
    position: absolute;
    cursor: pointer;
    right: 37px;
    text-align: center;
    top: 80px;
    width: 45px;
    z-index: 1;
}


/*====================================
       Version 1.2
========================================*/

.layer14 {
    color: #1e1e1e;
    font-family: great vibes;
}

.layer14 span {
    color: #9673e4
}

.layer15 {
    background: #000;
    color: #FFF;
    font-family: roboto;
    font-weight: 500;
    font-style: italic;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.layer16 {
    color: #3d3d3d;
    font-style: italic;
    font-weight: 600;
    font-family: arimo;
}

.layer16:before,
.layer16:after {
    content: "\f10d";
    position: absolute;
    left: 0;
    top: 0;
    color: #919191;
    font-style: normal;
    font-family: fontawesome;
    width: 30px;
    height: 30px;
}

.layer16:after {
    content: "\f10e";
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
}

.layer17 {
    font-style: italic;
    font-family: roboto;
    font-weight: 700;
}

.layer17:before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    height: 1px;
    width: 40px;
    background: #000;
}

.pageloader {
    background: rgba(255, 255, 255, 0.94);
    height: 100%;
    width: 100%;
    z-index: 10000000;
    position: fixed;
    left: 0;
    top: 0;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
}

.loader-styles {
    float: left;
    margin-bottom: -30px;
    text-align: center;
    width: 100%;
}

.loader-styles .loader-inner {
    display: table;
    height: 100px;
    margin: 0 auto 30px;
}


/*==== Cash Popup ====*/

.cash-popup {
    background: transparent url("../images/cash-popup.jpg") no-repeat scroll 0 0;
    padding: 100px 40px 100px 410px;
    width: 1170px;
}

.cash-popup-inner {
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    width: 100%!important;
}

.cash-popup-inner>span {
    color: #8b8b8b;
    font-family: roboto;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}

.cash-popup-inner>h4 {
    color: #2d2d2d;
    float: left;
    font-size: 36px;
    font-weight: 900;
    margin: 10px 0 20px;
    text-transform: uppercase;
    width: 100%;
}

.cash-popup-inner>h4 span {
    float: left;
    font-size: 20px;
    width: 100%;
}

.cash-popup-inner>p {
    display: inline-block;
    margin: 0 0 30px;
    width: 100%;
}

.cash-popup .select-wrapper input.select-dropdown {
    border: 0 none;
    box-sizing: border-box;
    color: #646464;
    font-family: arimo;
    font-size: 11px;
    height: 49px;
    margin-bottom: 0;
    padding: 0 20px;
}

.cash-popup .select-wrapper {
    background: rgba(0, 0, 0, 0) linear-gradient(#fdfdfd, #f9f9f9) repeat scroll 0 0;
    border: 1px solid #b7d6df;
    margin-bottom: 10px;
}

.select-donate-price {
    float: left;
    margin-top: 30px;
    text-align: center;
    width: 100%;
}

.select-donate-price>strong {
    color: #4d4c4c;
    float: left;
    font-family: roboto slab;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 15px;
    width: 100%;
}

.select-donate-price span {
    float: left;
    position: relative;
    width: 100%;
}

.button-set {
    float: left;
    width: 100%;
    position: relative;
}

.button-set a {
    background: rgba(0, 0, 0, 0) linear-gradient(#5c5c5c, #434343) repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-family: arimo;
    font-size: 11px;
    margin: 0 1px;
    padding: 13px 26px;
}

.cash-popup .select-donate-price textarea {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #b6b6b6;
    color: #8f8f8f;
    float: left;
    font-family: arimo;
    font-size: 12px;
    height: 150px;
    margin-left: 15%;
    margin-right: 15%;
    margin-top: 40px;
    padding: 65px 20px 20px;
    position: relative;
    text-align: center;
    width: 70%;
}

.select-donate-price>span.other-amount:before,
.select-donate-price>span.other-amount:after {
    background: #f4f4f4 none repeat scroll 0 0;
    border: 1px solid #bebebe;
    content: "OR";
    font-family: roboto slab;
    font-size: 13px;
    height: 47px;
    left: 50%;
    line-height: 43px;
    margin-left: -24px;
    position: absolute;
    top: 20px;
    width: 47px;
    z-index: 2;
}

.select-donate-price>span.other-amount:after {
    background: #fff;
    border: 0 none;
    height: 57px;
    left: 50%;
    margin-left: -29px;
    top: 14px;
    width: 57px;
    z-index: -1;
}

.select-type {
    float: left;
    margin-top: 40px;
    width: 100%;
}

.select-type>strong {
    color: #4d4c4c;
    float: left;
    font-family: roboto slab;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    width: 100%;
}

.select-type .button-set a,
.select-option .button-set a {
    font-size: 13px;
    padding: 15px 50px;
}

.select-option {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.select-option strong {
    float: left;
    width: 100%;
    font-size: 15px;
    color: #4d4c4c;
    margin-bottom: 20px;
    font-family: roboto slab;
}

.select-option p {
    font-family: roboto slab;
    color: #807f7f;
    font-size: 12px;
    text-align: center;
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.cash-popup input,
.cash-popup textarea {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d2cfcf;
    color: #a8a8a8;
    float: left;
    font-size: 11px;
    height: 49px;
    text-align: left;
    margin-bottom: 10px;
    padding: 10px 20px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.cash-popup textarea {
    height: auto;
    min-height: 150px;
}

.personal-detail {
    float: left;
    margin-top: 50px;
    padding: 0 30px;
    width: 100%;
    text-align: center;
}

.personal-detail strong {
    float: left;
    width: 100%;
    font-family: roboto slab;
    font-size: 18px;
    color: #4d4c4c;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 700;
}

.personal-detail .row {
    margin: 0 -5px
}

.personal-detail .row>div {
    padding: 0 5px
}

.track3 {
    background-color: transparent;
    border-radius: 10px;
    left: -55px;
    margin-right: 2px;
    position: relative;
    width: 10px;
}

.track3:hover,
.track3.dragging {
    background: #cccccc;
    background: rgba(0, 0, 0, 0.2);
}

.handle3 {
    width: 7px;
    background: #8c8c8c;
    background: rgba(0, 0, 0, 0.45);
    -webkit-border-radius: 7px;
    border-radius: 7px;
    right: 0;
    -webkit-transition: width 250ms;
    transition: width 250ms;
}

.track3:hover .handle3,
.track3.dragging .handle3 {
    width: 10px;
}

.creative-departments img {
    z-index: -1;
}

.creative-departments ul li:before {
    z-index: 1
}

.creative-departments .owl-nav {
    height: 0;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 2;
}

.creative-departments .owl-nav>div {
    color: transparent;
    float: left;
    height: 50px;
    margin-left: -50px;
    margin-top: -25px;
    position: relative;
    width: 30px;
}

.creative-departments .owl-nav>div:before {
    color: #535353;
    content: "\f104";
    font-family: fontawesome;
    font-size: 50px;
    height: 100%;
    left: 0;
    line-height: 50px;
    position: absolute;
    top: 0;
    width: 100%;
}

.creative-departments .owl-nav>div.owl-next:before {
    content: "\f105"
}

.creative-departments .owl-nav>div.owl-next {
    float: right;
    margin-left: 0;
    margin-right: -50px;
}

.creative-departments ul .owl-item li {
    width: 100%!important;
}


/*==== Page Loader ====*/

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: .7
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
    45% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: .7
    }
    80% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.ball-pulse>div:nth-child(0) {
    -webkit-animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale .75s -.36s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(1) {
    -webkit-animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale .75s -.24s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(2) {
    -webkit-animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale .75s -.12s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div:nth-child(3) {
    -webkit-animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: scale .75s 0s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.ball-pulse>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block
}

@-webkit-keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes ball-pulse-sync {
    33% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }
    66% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.ball-pulse-sync>div:nth-child(0) {
    -webkit-animation: ball-pulse-sync .6s -.21s infinite ease-in-out;
    animation: ball-pulse-sync .6s -.21s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(1) {
    -webkit-animation: ball-pulse-sync .6s -.14s infinite ease-in-out;
    animation: ball-pulse-sync .6s -.14s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(2) {
    -webkit-animation: ball-pulse-sync .6s -.07s infinite ease-in-out;
    animation: ball-pulse-sync .6s -.07s infinite ease-in-out
}

.ball-pulse-sync>div:nth-child(3) {
    -webkit-animation: ball-pulse-sync .6s 0s infinite ease-in-out;
    animation: ball-pulse-sync .6s 0s infinite ease-in-out
}

.ball-pulse-sync>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block
}

@-webkit-keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.ball-scale>div {
    background-color: #333;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
    height: 60px;
    width: 60px;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
    animation: ball-scale 1s 0s ease-in-out infinite
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.ball-rotate {
    position: relative
}

.ball-rotate>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: relative
}

.ball-rotate>div:first-child {
    -webkit-animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite;
    animation: rotate 1s 0s cubic-bezier(.7, -.13, .22, .86) infinite
}

.ball-rotate>div:after,
.ball-rotate>div:before {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    content: "";
    position: absolute;
    opacity: .8
}

.ball-rotate>div:before {
    top: 0;
    left: -28px
}

.ball-rotate>div:after {
    top: 0;
    left: 25px
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }
    50% {
        -webkit-transform: rotate(180deg) scale(0.6);
        transform: rotate(180deg) scale(0.6)
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1)
    }
}

.ball-clip-rotate>div {
    border-radius: 100%;
    margin: 2px;
    border: 2px solid #333;
    border-bottom-color: transparent;
    height: 25px;
    width: 25px;
    background: 0 0!important;
    display: inline-block;
    -webkit-animation: rotate .75s 0s linear infinite;
    animation: rotate .75s 0s linear infinite
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }
    50% {
        -webkit-transform: rotate(180deg) scale(0.6);
        transform: rotate(180deg) scale(0.6)
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1)
    }
}

@keyframes scale {
    30% {
        -webkit-transform: scale(0.3);
        transform: scale(0.3)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-clip-rotate-pulse {
    position: relative;
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px)
}

.ball-clip-rotate-pulse>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%
}

.ball-clip-rotate-pulse>div:first-child {
    background: #333;
    height: 16px;
    width: 16px;
    top: 5px;
    left: -8px;
    -webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

.ball-clip-rotate-pulse>div:last-child {
    position: absolute;
    width: 30px;
    height: 30px;
    left: -16px;
    top: -2px;
    background: 0 0;
    border: 2px solid;
    border-color: #333 transparent;
    -webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1)
    }
    50% {
        -webkit-transform: rotate(180deg) scale(0.6);
        transform: rotate(180deg) scale(0.6)
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1)
    }
}

.ball-clip-rotate-multiple {
    position: relative
}

.ball-clip-rotate-multiple>div {
    position: absolute;
    left: -20px;
    top: -20px;
    border: 2px solid #333;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-radius: 100%;
    height: 35px;
    width: 35px;
    -webkit-animation: rotate 1s 0s ease-in-out infinite;
    animation: rotate 1s 0s ease-in-out infinite
}

.ball-clip-rotate-multiple>div:last-child {
    display: inline-block;
    top: -10px;
    left: -10px;
    width: 15px;
    height: 15px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    border-color: #333 transparent;
    -webkit-animation-direction: reverse;
    animation-direction: reverse
}

@-webkit-keyframes ball-scale-ripple {
    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 1
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }
    100% {
        opacity: 0
    }
}

@keyframes ball-scale-ripple {
    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 1
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }
    100% {
        opacity: 0
    }
}

.ball-scale-ripple>div {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px solid #333;
    -webkit-animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8);
    animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8)
}

@-webkit-keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 1
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }
    100% {
        opacity: 0
    }
}

@keyframes ball-scale-ripple-multiple {
    0% {
        -webkit-transform: scale(0.1);
        transform: scale(0.1);
        opacity: 1
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: .7
    }
    100% {
        opacity: 0
    }
}

.ball-scale-ripple-multiple {
    position: relative;
    -webkit-transform: translateY(-25px);
    -ms-transform: translateY(-25px);
    transform: translateY(-25px)
}

.ball-scale-ripple-multiple>div:nth-child(0) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

.ball-scale-ripple-multiple>div:nth-child(1) {
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

.ball-scale-ripple-multiple>div:nth-child(2) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.ball-scale-ripple-multiple>div:nth-child(3) {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.ball-scale-ripple-multiple>div {
    position: absolute;
    top: -2px;
    left: -26px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 2px solid #333;
    -webkit-animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8);
    animation: ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21, .53, .56, .8)
}

@-webkit-keyframes ball-beat {
    50% {
        opacity: .2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-beat {
    50% {
        opacity: .2;
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-beat>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    display: inline-block;
    -webkit-animation: ball-beat .7s 0s infinite linear;
    animation: ball-beat .7s 0s infinite linear
}

.ball-beat>div:nth-child(2n-1) {
    -webkit-animation-delay: -.35s!important;
    animation-delay: -.35s!important
}

@-webkit-keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    5% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ball-scale-multiple {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
    5% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.ball-scale-multiple {
    position: relative;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px)
}

.ball-scale-multiple>div:nth-child(2) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

.ball-scale-multiple>div:nth-child(3) {
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

.ball-scale-multiple>div {
    background-color: #333;
    border-radius: 100%;
    position: absolute;
    left: -30px;
    top: 0;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    animation: ball-scale-multiple 1s 0s linear infinite
}

@-webkit-keyframes ball-triangle-path-1 {
    33% {
        -webkit-transform: translate(25px, -50px);
        transform: translate(25px, -50px)
    }
    66% {
        -webkit-transform: translate(50px, 0);
        transform: translate(50px, 0)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

@keyframes ball-triangle-path-1 {
    33% {
        -webkit-transform: translate(25px, -50px);
        transform: translate(25px, -50px)
    }
    66% {
        -webkit-transform: translate(50px, 0);
        transform: translate(50px, 0)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

@-webkit-keyframes ball-triangle-path-2 {
    33% {
        -webkit-transform: translate(25px, 50px);
        transform: translate(25px, 50px)
    }
    66% {
        -webkit-transform: translate(-25px, 50px);
        transform: translate(-25px, 50px)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

@keyframes ball-triangle-path-2 {
    33% {
        -webkit-transform: translate(25px, 50px);
        transform: translate(25px, 50px)
    }
    66% {
        -webkit-transform: translate(-25px, 50px);
        transform: translate(-25px, 50px)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

@-webkit-keyframes ball-triangle-path-3 {
    33% {
        -webkit-transform: translate(-50px, 0);
        transform: translate(-50px, 0)
    }
    66% {
        -webkit-transform: translate(-25px, -50px);
        transform: translate(-25px, -50px)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

@keyframes ball-triangle-path-3 {
    33% {
        -webkit-transform: translate(-50px, 0);
        transform: translate(-50px, 0)
    }
    66% {
        -webkit-transform: translate(-25px, -50px);
        transform: translate(-25px, -50px)
    }
    100% {
        -webkit-transform: translate(0px, 0);
        transform: translate(0px, 0)
    }
}

.ball-triangle-path {
    position: relative;
    -webkit-transform: translate(-29.99px, -37.51px);
    -ms-transform: translate(-29.99px, -37.51px);
    transform: translate(-29.99px, -37.51px)
}

.ball-triangle-path>div:nth-child(1) {
    -webkit-animation-name: ball-triangle-path-1;
    animation-name: ball-triangle-path-1;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(2) {
    -webkit-animation-name: ball-triangle-path-2;
    animation-name: ball-triangle-path-2;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ball-triangle-path>div:nth-child(3) {
    -webkit-animation-name: ball-triangle-path-3;
    animation-name: ball-triangle-path-3;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ball-triangle-path>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid #333
}

.ball-triangle-path>div:nth-of-type(1) {
    top: 50px
}

.ball-triangle-path>div:nth-of-type(2) {
    left: 25px
}

.ball-triangle-path>div:nth-of-type(3) {
    top: 50px;
    left: 50px
}

@-webkit-keyframes ball-pulse-rise-even {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    25% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    75% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-pulse-rise-even {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    25% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    50% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    75% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes ball-pulse-rise-odd {
    0% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    25% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    75% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
}

@keyframes ball-pulse-rise-odd {
    0% {
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    25% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    75% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(0.75);
        transform: scale(0.75)
    }
}

.ball-pulse-rise>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: cubic-bezier(.15, .46, .9, .6);
    animation-timing-function: cubic-bezier(.15, .46, .9, .6);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

.ball-pulse-rise>div:nth-child(2n) {
    -webkit-animation-name: ball-pulse-rise-even;
    animation-name: ball-pulse-rise-even
}

.ball-pulse-rise>div:nth-child(2n-1) {
    -webkit-animation-name: ball-pulse-rise-odd;
    animation-name: ball-pulse-rise-odd
}

@-webkit-keyframes ball-grid-beat {
    50% {
        opacity: .7
    }
    100% {
        opacity: 1
    }
}

@keyframes ball-grid-beat {
    50% {
        opacity: .7
    }
    100% {
        opacity: 1
    }
}

.ball-grid-beat {
    width: 57px
}

.ball-grid-beat>div:nth-child(1) {
    -webkit-animation-delay: -.07s;
    animation-delay: -.07s;
    -webkit-animation-duration: 1.53s;
    animation-duration: 1.53s
}

.ball-grid-beat>div:nth-child(2) {
    -webkit-animation-delay: .72s;
    animation-delay: .72s;
    -webkit-animation-duration: .94s;
    animation-duration: .94s
}

.ball-grid-beat>div:nth-child(3) {
    -webkit-animation-delay: .11s;
    animation-delay: .11s;
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s
}

.ball-grid-beat>div:nth-child(4) {
    -webkit-animation-delay: .13s;
    animation-delay: .13s;
    -webkit-animation-duration: 1.01s;
    animation-duration: 1.01s
}

.ball-grid-beat>div:nth-child(5) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s
}

.ball-grid-beat>div:nth-child(6) {
    -webkit-animation-delay: .18s;
    animation-delay: .18s;
    -webkit-animation-duration: .97s;
    animation-duration: .97s
}

.ball-grid-beat>div:nth-child(7) {
    -webkit-animation-delay: -.09s;
    animation-delay: -.09s;
    -webkit-animation-duration: .67s;
    animation-duration: .67s
}

.ball-grid-beat>div:nth-child(8) {
    -webkit-animation-delay: .42s;
    animation-delay: .42s;
    -webkit-animation-duration: .92s;
    animation-duration: .92s
}

.ball-grid-beat>div:nth-child(9) {
    -webkit-animation-delay: .52s;
    animation-delay: .52s;
    -webkit-animation-duration: 1.43s;
    animation-duration: 1.43s
}

.ball-grid-beat>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-beat;
    animation-name: ball-grid-beat;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: .7
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: .7
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.ball-grid-pulse {
    width: 57px
}

.ball-grid-pulse>div:nth-child(1) {
    -webkit-animation-delay: .73s;
    animation-delay: .73s;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s
}

.ball-grid-pulse>div:nth-child(2) {
    -webkit-animation-delay: .32s;
    animation-delay: .32s;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s
}

.ball-grid-pulse>div:nth-child(3) {
    -webkit-animation-delay: .71s;
    animation-delay: .71s;
    -webkit-animation-duration: .88s;
    animation-duration: .88s
}

.ball-grid-pulse>div:nth-child(4) {
    -webkit-animation-delay: .62s;
    animation-delay: .62s;
    -webkit-animation-duration: 1.06s;
    animation-duration: 1.06s
}

.ball-grid-pulse>div:nth-child(5) {
    -webkit-animation-delay: .31s;
    animation-delay: .31s;
    -webkit-animation-duration: .62s;
    animation-duration: .62s
}

.ball-grid-pulse>div:nth-child(6) {
    -webkit-animation-delay: -.14s;
    animation-delay: -.14s;
    -webkit-animation-duration: 1.48s;
    animation-duration: 1.48s
}

.ball-grid-pulse>div:nth-child(7) {
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s;
    -webkit-animation-duration: 1.47s;
    animation-duration: 1.47s
}

.ball-grid-pulse>div:nth-child(8) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-animation-duration: 1.49s;
    animation-duration: 1.49s
}

.ball-grid-pulse>div:nth-child(9) {
    -webkit-animation-delay: .73s;
    animation-delay: .73s;
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}

.ball-grid-pulse>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
    animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes ball-spin-fade-loader {
    50% {
        opacity: .3;
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ball-spin-fade-loader {
    50% {
        opacity: .3;
        -webkit-transform: scale(0.4);
        transform: scale(0.4)
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.ball-spin-fade-loader {
    position: relative;
    top: -10px;
    left: -10px
}

.ball-spin-fade-loader>div:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -.96s infinite linear;
    animation: ball-spin-fade-loader 1s -.96s infinite linear
}

.ball-spin-fade-loader>div:nth-child(2) {
    top: 17.05px;
    left: 17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.84s infinite linear;
    animation: ball-spin-fade-loader 1s -.84s infinite linear
}

.ball-spin-fade-loader>div:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s -.72s infinite linear;
    animation: ball-spin-fade-loader 1s -.72s infinite linear
}

.ball-spin-fade-loader>div:nth-child(4) {
    top: -17.05px;
    left: 17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.6s infinite linear;
    animation: ball-spin-fade-loader 1s -.6s infinite linear
}

.ball-spin-fade-loader>div:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s -.48s infinite linear;
    animation: ball-spin-fade-loader 1s -.48s infinite linear
}

.ball-spin-fade-loader>div:nth-child(6) {
    top: -17.05px;
    left: -17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.36s infinite linear;
    animation: ball-spin-fade-loader 1s -.36s infinite linear
}

.ball-spin-fade-loader>div:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s -.24s infinite linear;
    animation: ball-spin-fade-loader 1s -.24s infinite linear
}

.ball-spin-fade-loader>div:nth-child(8) {
    top: 17.05px;
    left: -17.05px;
    -webkit-animation: ball-spin-fade-loader 1s -.12s infinite linear;
    animation: ball-spin-fade-loader 1s -.12s infinite linear
}

.ball-spin-fade-loader>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute
}

@-webkit-keyframes ball-spin-loader {
    75% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

@keyframes ball-spin-loader {
    75% {
        opacity: .2
    }
    100% {
        opacity: 1
    }
}

.ball-spin-loader {
    position: relative
}

.ball-spin-loader>span:nth-child(1) {
    top: 45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s .9s infinite linear;
    animation: ball-spin-loader 2s .9s infinite linear
}

.ball-spin-loader>span:nth-child(2) {
    top: 30.68px;
    left: 30.68px;
    -webkit-animation: ball-spin-loader 2s 1.8s infinite linear;
    animation: ball-spin-loader 2s 1.8s infinite linear
}

.ball-spin-loader>span:nth-child(3) {
    top: 0;
    left: 45px;
    -webkit-animation: ball-spin-loader 2s 2.7s infinite linear;
    animation: ball-spin-loader 2s 2.7s infinite linear
}

.ball-spin-loader>span:nth-child(4) {
    top: -30.68px;
    left: 30.68px;
    -webkit-animation: ball-spin-loader 2s 3.6s infinite linear;
    animation: ball-spin-loader 2s 3.6s infinite linear
}

.ball-spin-loader>span:nth-child(5) {
    top: -45px;
    left: 0;
    -webkit-animation: ball-spin-loader 2s 4.5s infinite linear;
    animation: ball-spin-loader 2s 4.5s infinite linear
}

.ball-spin-loader>span:nth-child(6) {
    top: -30.68px;
    left: -30.68px;
    -webkit-animation: ball-spin-loader 2s 5.4s infinite linear;
    animation: ball-spin-loader 2s 5.4s infinite linear
}

.ball-spin-loader>span:nth-child(7) {
    top: 0;
    left: -45px;
    -webkit-animation: ball-spin-loader 2s 6.3s infinite linear;
    animation: ball-spin-loader 2s 6.3s infinite linear
}

.ball-spin-loader>span:nth-child(8) {
    top: 30.68px;
    left: -30.68px;
    -webkit-animation: ball-spin-loader 2s 7.2s infinite linear;
    animation: ball-spin-loader 2s 7.2s infinite linear
}

.ball-spin-loader>div {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: green
}

@-webkit-keyframes ball-zig {
    33% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    66% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes ball-zig {
    33% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    66% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes ball-zag {
    33% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    66% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes ball-zag {
    33% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    66% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.ball-zig-zag {
    position: relative;
    -webkit-transform: translate(-15px, -15px);
    -ms-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px)
}

.ball-zig-zag>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px 2px 2px 15px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    top: 4px;
    left: -7px
}

.ball-zig-zag>div:first-child {
    -webkit-animation: ball-zig .7s 0s infinite linear;
    animation: ball-zig .7s 0s infinite linear
}

.ball-zig-zag>div:last-child {
    -webkit-animation: ball-zag .7s 0s infinite linear;
    animation: ball-zag .7s 0s infinite linear
}

@-webkit-keyframes ball-zig-deflect {
    17% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    34% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    67% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    84% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes ball-zig-deflect {
    17% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    34% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    67% {
        -webkit-transform: translate(15px, -30px);
        transform: translate(15px, -30px)
    }
    84% {
        -webkit-transform: translate(-15px, -30px);
        transform: translate(-15px, -30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@-webkit-keyframes ball-zag-deflect {
    17% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    34% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    67% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    84% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes ball-zag-deflect {
    17% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    34% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
    67% {
        -webkit-transform: translate(-15px, 30px);
        transform: translate(-15px, 30px)
    }
    84% {
        -webkit-transform: translate(15px, 30px);
        transform: translate(15px, 30px)
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.ball-zig-zag-deflect {
    position: relative;
    -webkit-transform: translate(-15px, -15px);
    -ms-transform: translate(-15px, -15px);
    transform: translate(-15px, -15px)
}

.ball-zig-zag-deflect>div {
    background-color: #333;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px 2px 2px 15px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    top: 4px;
    left: -7px
}

.ball-zig-zag-deflect>div:first-child {
    -webkit-animation: ball-zig-deflect 1.5s 0s infinite linear;
    animation: ball-zig-deflect 1.5s 0s infinite linear
}

.ball-zig-zag-deflect>div:last-child {
    -webkit-animation: ball-zag-deflect 1.5s 0s infinite linear;
    animation: ball-zag-deflect 1.5s 0s infinite linear
}

@-webkit-keyframes line-scale {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

@keyframes line-scale {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

.line-scale>div:nth-child(1) {
    -webkit-animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s -.4s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(2) {
    -webkit-animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s -.3s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(3) {
    -webkit-animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s -.2s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(4) {
    -webkit-animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s -.1s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div:nth-child(5) {
    -webkit-animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
    animation: line-scale 1s 0s infinite cubic-bezier(.2, .68, .18, 1.08)
}

.line-scale>div {
    background-color: #333;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block
}

@-webkit-keyframes line-scale-party {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes line-scale-party {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.line-scale-party>div:nth-child(1) {
    -webkit-animation-delay: .23s;
    animation-delay: .23s;
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s
}

.line-scale-party>div:nth-child(2) {
    -webkit-animation-delay: .09s;
    animation-delay: .09s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.line-scale-party>div:nth-child(3) {
    -webkit-animation-delay: .44s;
    animation-delay: .44s;
    -webkit-animation-duration: .65s;
    animation-duration: .65s
}

.line-scale-party>div:nth-child(4) {
    -webkit-animation-delay: -.12s;
    animation-delay: -.12s;
    -webkit-animation-duration: 1.01s;
    animation-duration: 1.01s
}

.line-scale-party>div {
    background-color: #333;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation-name: line-scale-party;
    animation-name: line-scale-party;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0
}

@-webkit-keyframes line-scale-pulse-out {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

@keyframes line-scale-pulse-out {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    50% {
        -webkit-transform: scaley(0.4);
        transform: scaley(0.4)
    }
    100% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

.line-scale-pulse-out>div {
    background-color: #333;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    display: inline-block;
    -webkit-animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85);
    animation: line-scale-pulse-out .9s -.6s infinite cubic-bezier(.85, .25, .37, .85)
}

.line-scale-pulse-out>div:nth-child(2),
.line-scale-pulse-out>div:nth-child(4) {
    -webkit-animation-delay: -.4s!important;
    animation-delay: -.4s!important
}

.line-scale-pulse-out>div:nth-child(1),
.line-scale-pulse-out>div:nth-child(5) {
    -webkit-animation-delay: -.2s!important;
    animation-delay: -.2s!important
}

@-webkit-keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    80% {
        -webkit-transform: scaley(0.3);
        transform: scaley(0.3)
    }
    90% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

@keyframes line-scale-pulse-out-rapid {
    0% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
    80% {
        -webkit-transform: scaley(0.3);
        transform: scaley(0.3)
    }
    90% {
        -webkit-transform: scaley(1);
        transform: scaley(1)
    }
}

.line-scale-pulse-out-rapid>div {
    background-color: #333;
    width: 4px;
    height: 35px;
    border-radius: 2px;
    margin: 2px;
    display: inline-block;
    -webkit-animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78);
    animation: line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11, .49, .38, .78)
}

.line-scale-pulse-out-rapid>div:nth-child(2),
.line-scale-pulse-out-rapid>div:nth-child(4) {
    -webkit-animation-delay: -.25s!important;
    animation-delay: -.25s!important
}

.line-scale-pulse-out-rapid>div:nth-child(1),
.line-scale-pulse-out-rapid>div:nth-child(5) {
    -webkit-animation-delay: 0s!important;
    animation-delay: 0s!important
}

@-webkit-keyframes line-spin-fade-loader {
    50% {
        opacity: .3
    }
    100% {
        opacity: 1
    }
}

@keyframes line-spin-fade-loader {
    50% {
        opacity: .3
    }
    100% {
        opacity: 1
    }
}

.line-spin-fade-loader {
    position: relative;
    top: -10px;
    left: -4px
}

.line-spin-fade-loader>div:nth-child(1) {
    top: 20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.84s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(2) {
    top: 13.64px;
    left: 13.64px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.72s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(3) {
    top: 0;
    left: 20px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.6s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(4) {
    top: -13.64px;
    left: 13.64px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.48s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(5) {
    top: -20px;
    left: 0;
    -webkit-animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.36s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(6) {
    top: -13.64px;
    left: -13.64px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.24s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(7) {
    top: 0;
    left: -20px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s -.12s infinite ease-in-out
}

.line-spin-fade-loader>div:nth-child(8) {
    top: 13.64px;
    left: -13.64px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out;
    animation: line-spin-fade-loader 1.2s 0s infinite ease-in-out
}

.line-spin-fade-loader>div {
    background-color: #333;
    border-radius: 2px;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    width: 5px;
    height: 15px
}

@-webkit-keyframes triangle-skew-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

@keyframes triangle-skew-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

.triangle-skew-spin>div {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #333;
    -webkit-animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: triangle-skew-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

@-webkit-keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

@keyframes square-spin {
    25% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(0);
        transform: perspective(100px) rotateX(180deg) rotateY(0)
    }
    50% {
        -webkit-transform: perspective(100px) rotateX(180deg) rotateY(180deg);
        transform: perspective(100px) rotateX(180deg) rotateY(180deg)
    }
    75% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(180deg);
        transform: perspective(100px) rotateX(0) rotateY(180deg)
    }
    100% {
        -webkit-transform: perspective(100px) rotateX(0) rotateY(0);
        transform: perspective(100px) rotateX(0) rotateY(0)
    }
}

.square-spin>div {
    width: 50px;
    height: 50px;
    background: #333;
    border: 1px solid #333;
    -webkit-animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite;
    animation: square-spin 3s 0s cubic-bezier(.09, .57, .49, .9) infinite
}

@-webkit-keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
}

@keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg)
    }
}

@-webkit-keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

@-webkit-keyframes pacman-balls {
    75% {
        opacity: .7
    }
    100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px)
    }
}

@keyframes pacman-balls {
    75% {
        opacity: .7
    }
    100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px)
    }
}

.pacman {
    position: relative
}

.pacman>div:nth-child(3) {
    -webkit-animation: pacman-balls 1s -.66s infinite linear;
    animation: pacman-balls 1s -.66s infinite linear
}

.pacman>div:nth-child(4) {
    -webkit-animation: pacman-balls 1s -.33s infinite linear;
    animation: pacman-balls 1s -.33s infinite linear
}

.pacman>div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0s infinite linear;
    animation: pacman-balls 1s 0s infinite linear
}

.pacman>div:first-of-type {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #333;
    border-left: 25px solid #333;
    border-bottom: 25px solid #333;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
    animation: rotate_pacman_half_up .5s 0s infinite;
    position: relative;
    left: -30px
}

.pacman>div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #333;
    border-left: 25px solid #333;
    border-bottom: 25px solid #333;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
    animation: rotate_pacman_half_down .5s 0s infinite;
    margin-top: -50px;
    position: relative;
    left: -30px
}

.pacman>div:nth-child(3),
.pacman>div:nth-child(4),
.pacman>div:nth-child(5),
.pacman>div:nth-child(6) {
    background-color: #333;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
    -ms-transform: translate(0, -6.25px);
    transform: translate(0, -6.25px);
    top: 25px;
    left: 70px
}

@-webkit-keyframes cube-transition {
    25% {
        -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
        transform: translateX(50px) scale(0.5) rotate(-90deg)
    }
    50% {
        -webkit-transform: translate(50px, 50px) rotate(-180deg);
        transform: translate(50px, 50px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
        transform: translateY(50px) scale(0.5) rotate(-270deg)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

@keyframes cube-transition {
    25% {
        -webkit-transform: translateX(50px) scale(0.5) rotate(-90deg);
        transform: translateX(50px) scale(0.5) rotate(-90deg)
    }
    50% {
        -webkit-transform: translate(50px, 50px) rotate(-180deg);
        transform: translate(50px, 50px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateY(50px) scale(0.5) rotate(-270deg);
        transform: translateY(50px) scale(0.5) rotate(-270deg)
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg)
    }
}

.cube-transition {
    position: relative;
    -webkit-transform: translate(-25px, -25px);
    -ms-transform: translate(-25px, -25px);
    transform: translate(-25px, -25px)
}

.cube-transition>div {
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: -5px;
    background-color: #333;
    -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
    animation: cube-transition 1.6s 0s infinite ease-in-out
}

.cube-transition>div:last-child {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

@-webkit-keyframes spin-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin-rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.semi-circle-spin {
    position: relative;
    width: 35px;
    height: 35px;
    overflow: hidden
}

.semi-circle-spin>div {
    position: absolute;
    border-width: 0;
    border-radius: 100%;
    -webkit-animation: spin-rotate .6s 0s infinite linear;
    animation: spin-rotate .6s 0s infinite linear;
    background-image: -webkit-linear-gradient(transparent 0, transparent 70%, #333 30%, #333 100%);
    background-image: linear-gradient(transparent 0, transparent 70%, #333 30%, #333 100%);
    width: 100%;
    height: 100%
}
.mobilsli{
    width: 110%;
    margin-top:-20px;
}